fix(ios): Safari extension popup sizing for iPad/iPhone

vveerrgg · claude · vveerrgg · commit be678bc86a05 · 2026-03-03T14:56:35.000-08:00
- iPad popover: fix viewport width (device-width→380px) and add
  min-height for Safari auto-sizer. Content, QR code, and tab bar
  all visible. Uses CSS media query + JS innerWidth&gt;500 detection.
- iPhone sheet: native half-sheet/full-sheet behavior preserved.
- Hide tab bar and locked footer when virtual keyboard opens
  (visualViewport resize listener).
- Add shrink-to-fit=no to viewport meta tag.
- Add id="locked-footer" for keyboard-hide targeting.
- Toggle switches: use material-style toggles for frame-protection
  and sync settings (matching existing toggle pattern).
- Security page: add encryption status banner, auto-close master
  password accordion after setting password.
- Update QA tablet screenshot sizes in ui-target-map.json.
- Add .build/ to .gitignore (Xcode DerivedData).

Fixes: W3C WebExtensions #692, Apple Forums 670733/698319/697155

Co-Authored-By: Claude Opus 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/.gitignore b/.gitignore
@@ -10,9 +10,10 @@ docker/
 .DS_Store
 **/.DS_Store
 
-# Xcode user data
+# Xcode user data and build artifacts
 *.xcuserstate
 xcuserdata/
+.build/
 
 # Distribution builds and zips
 distros/
diff --git a/QA-AUTOMATION/ui-target-map.json b/QA-AUTOMATION/ui-target-map.json
@@ -29,7 +29,8 @@
     "cellular_bars": 4
   },
   "appstore_sizes": {
-    "tablet-11": { "width": 1668, "height": 2388 }
+    "tablet-12.9": { "width": 2048, "height": 2732 },
+    "tablet-13": { "width": 2064, "height": 2752 }
   },
   "screenshots_sequence": [
     {
diff --git a/src/security/security.html b/src/security/security.html
@@ -331,6 +331,16 @@ <h3 class="subsection-header">Remove Master Password</h3>
                 </div>
             </details>
 
+            <!-- Encryption status (shown when master password is active) -->
+            <div id="encryption-status" class="flex items-center gap-2 mt-2" style="display:none;padding:12px 16px;border-radius:4px;background:#1a2e1a;border:1px solid #49483e;">
+                <svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M16 12V8a4 4 0 10-8 0v4" stroke="#a6e22e" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+                    <rect x="5" y="12" width="14" height="10" rx="2" stroke="#a6e22e" stroke-width="1.5"></rect>
+                    <circle cx="12" cy="17" r="1.5" fill="#a6e22e"></circle>
+                </svg>
+                <span class="text-sm font-bold" style="color:#a6e22e;">Master password is active — keys are encrypted at rest.</span>
+            </div>
+
         </div><!-- end unlocked-view -->
     </body>
 </html>
diff --git a/src/security/security.js b/src/security/security.js
@@ -115,6 +115,10 @@ function render() {
     const rmErr = $('remove-error');
     if (rmErr) { rmErr.textContent = state.removeError; rmErr.style.display = state.removeError ? 'block' : 'none'; }
 
+    // Encryption status banner
+    const encryptionStatus = $('encryption-status');
+    if (encryptionStatus) encryptionStatus.style.display = state.hasPassword ? 'flex' : 'none';
+
     // Auto-lock section
     const autolockDisabled = $('autolock-disabled-msg');
     const autolockControls = $('autolock-controls');
@@ -181,6 +185,9 @@ async function handleSetPassword() {
             state.hasPassword = true;
             state.newPassword = '';
             state.confirmPassword = '';
+            // Close the master password accordion
+            const mp = document.getElementById('master-password');
+            if (mp && mp.open) mp.open = false;
             showPageSuccess('Master password set. Your keys are now encrypted at rest.');
         } else {
             state.securityError = (result && result.error) || 'Failed to set password.';
diff --git a/src/sidepanel.html b/src/sidepanel.html
@@ -2,7 +2,7 @@
 <html>
     <head>
         <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width,initial-scale=1" />
+        <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no" />
         <link rel="stylesheet" href="options.build.css" />
         <script defer src="sidepanel.build.js"></script>
         <style>
@@ -157,6 +157,15 @@
                 background-color: #a6e22e;
             }
             .hidden { display: none !important; }
+            /* iOS Safari extension popup sizing.
+               iPad: min-height added via JS for popover auto-sizer.
+               iPhone: native half-sheet / full-sheet behavior.
+               See: W3C WebExtensions #692, Apple Forums 670733, 698319, 697155. */
+            @media (pointer: coarse) and (hover: none) {
+                .sidepanel-layout {
+                    height: 100%;
+                }
+            }
             @media (prefers-reduced-motion: reduce) {
                 *, *::before, *::after {
                     animation-duration: 0.01ms !important;
@@ -168,6 +177,37 @@
     </head>
 
     <body>
+        <script>
+            // iOS Safari extension popup fixes.
+            // iPad: popover — fix viewport width + add min-height for auto-sizer.
+            // iPhone: sheet — set explicit pixel height so layout fills the sheet.
+            // innerWidth > 500 distinguishes iPad (820px) from iPhone (375-430px).
+            (function() {
+                if (!window.matchMedia('(pointer: coarse) and (hover: none)').matches) return;
+                if (window.innerWidth > 500) {
+                    // iPad: fix viewport scaling
+                    var vp = document.querySelector('meta[name="viewport"]');
+                    if (vp) vp.setAttribute('content', 'width=380,initial-scale=1,shrink-to-fit=no');
+                    // iPad popover needs min-height so Safari auto-sizer allocates enough space
+                    var s = document.createElement('style');
+                    s.textContent = '.sidepanel-layout{min-height:580px}';
+                    document.head.appendChild(s);
+                }
+            })();
+
+            // iOS: hide tab bar and locked footer when virtual keyboard is open.
+            (function() {
+                if (!window.visualViewport) return;
+                var threshold = 0.75;
+                window.visualViewport.addEventListener('resize', function() {
+                    var kbOpen = window.visualViewport.height < window.innerHeight * threshold;
+                    var tabs = document.querySelector('.sidepanel-tabs');
+                    var footer = document.getElementById('locked-footer');
+                    if (tabs) tabs.style.display = kbOpen ? 'none' : '';
+                    if (footer) footer.style.display = kbOpen ? 'none' : '';
+                });
+            })();
+        </script>
         <div class="sidepanel-layout">
             <!-- LOCKED STATE -->
             <div id="locked-view" class="hidden" style="display:flex;flex-direction:column;height:100%;">
@@ -221,18 +261,18 @@
                                 </svg>
                             </button>
                         </div>
-                        <label class="flex items-center gap-3 cursor-pointer" style="padding:4px 0;">
+                        <label class="flex items-center justify-between cursor-pointer" style="padding:4px 0;">
+                            <span style="color:#f8f8f2;font-size:14px;">Allow Nostr access while locked</span>
                             <span class="toggle-switch">
                                 <input id="nostr-access-toggle" type="checkbox" />
                                 <span class="toggle-slider"></span>
                             </span>
-                            <span style="color:#f8f8f2;font-size:14px;">Allow Nostr access while locked</span>
                         </label>
                         <p id="nostr-access-status" style="color:#b0b0a8;font-size:0.8rem;margin-top:6px;line-height:1.4;"></p>
                     </div>
                 </div>
                 </div>
-                <div style="flex-shrink:0;padding:12px 16px;border-top:1px solid #49483e;background:#3e3d32;text-align:center;font-size:0.75rem;">
+                <div id="locked-footer" style="flex-shrink:0;padding:12px 16px;border-top:1px solid #49483e;background:#3e3d32;text-align:center;font-size:0.75rem;">
                     <a id="footer-home-link" href="https://nostrkey.com" style="color:#b0b0a8;text-decoration:none;cursor:pointer;">NostrKey.com</a>
                     <span style="color:#49483e;margin:0 6px;">|</span>
                     <a id="footer-terms-link" href="https://nostrkey.com/terms.html" style="color:#b0b0a8;text-decoration:none;cursor:pointer;">Ts &amp; Cs</a>
@@ -515,18 +555,23 @@ <h2 class="section-title">Nostr Keys</h2>
                             <h2 class="section-title">Security</h2>
                             <button id="settings-security-btn" class="button w-full mb-2">Master Password</button>
                             <button id="settings-autolock-btn" class="button w-full">Auto-lock Settings</button>
-                            <label class="flex items-center gap-3 cursor-pointer" style="padding:4px 0;margin-top:8px;">
-                                <input id="frame-protection-toggle" type="checkbox"
-                                       style="width:18px;height:18px;accent-color:#a6e22e;" />
+                            <label class="flex items-center justify-between cursor-pointer" style="padding:4px 0;margin-top:8px;">
                                 <span style="color:#f8f8f2;font-size:14px;">Block cross-origin frames</span>
+                                <span class="toggle-switch">
+                                    <input id="frame-protection-toggle" type="checkbox" />
+                                    <span class="toggle-slider"></span>
+                                </span>
                             </label>
                             <p id="frame-protection-status" style="color:#b0b0a8;font-size:0.8rem;margin-top:4px;"></p>
                         </div>
                         <div class="section-card">
                             <h2 class="section-title">Sync</h2>
-                            <label class="flex items-center gap-3 cursor-pointer" style="padding:4px 0;">
-                                <input id="sync-toggle" type="checkbox" style="width:18px;height:18px;accent-color:#a6e22e;" />
+                            <label class="flex items-center justify-between cursor-pointer" style="padding:4px 0;">
                                 <span style="color:#f8f8f2;font-size:14px;">Sync across devices</span>
+                                <span class="toggle-switch">
+                                    <input id="sync-toggle" type="checkbox" />
+                                    <span class="toggle-slider"></span>
+                                </span>
                             </label>
                             <p id="sync-status-text" style="color:#b0b0a8;font-size:0.8rem;margin-top:4px;"></p>
                         </div>
