Changeset f6b2c68 in Klonkt

Timestamp:

06/26/2026 04:49:12 PM (2 months ago)

Author:

Robin Genis <roboburr@…>

Branches:

main

Children:

9327a85

Parents:

1c85964

Message:

fix(ios-pwa): pad body for safe-area when masthead is hidden on mobile

Root cause (found via on-device debug): <=767px the masthead is display:none
(bottom-tab replaces it), so its safe-area padding has no effect (height 0) and the
profile-header lands at top=0 behind the Dynamic Island. Landscape (>767px) shows the
masthead so it worked there. Fix: pad body:not(.on-admin) by --ios-safe-top in the same
mobile media query, and make the JS adaptive (masthead hidden -> force body padding,
else masthead). Removed the temporary debug overlay; SW cache -> v14.

Location:

src

Files:

• server.js (modified) (1 diff)
• views/partials/topnav.ejs (modified) (1 diff)
• views/shell.ejs (modified) (1 diff)

src/server.js

@@ -395 +395 @@
   res.set('Cache-Control', 'no-cache');
   res.send(`
-const CACHE_VERSION = 'pcms-v13-' + new Date().toISOString().split('T')[0];
+const CACHE_VERSION = 'pcms-v14-' + new Date().toISOString().split('T')[0];
 self.addEventListener('install', e => {
   e.waitUntil(caches.open(CACHE_VERSION).then(c => c.addAll(['/'])));

src/views/partials/topnav.ejs

@@ -328 +328 @@
 @media (max-width: 767px) {
   body:not(.on-admin) .masthead { display: none; }
+  /* The masthead is gone on mobile, so it can't carry the iOS safe-area top inset
+     (env() resolves to 0 in the home-screen PWA; --ios-safe-top is set by JS in shell).
+     Pad the body instead so the profile-header clears the Dynamic Island / notch. */
+  body:not(.on-admin) { padding-top: var(--ios-safe-top, 0px); }
 }
 

src/views/shell.ejs

@@ -223 +223 @@
     document.documentElement.style.setProperty('--ios-safe-top', i + 'px');
     var mh = document.querySelector('.masthead');
-    if (mh) mh.style.paddingTop = 'calc(.55rem + ' + i + 'px)';
-    /* TEMP DEBUG — remove after diagnosing the iOS PWA safe-area. Tap to dismiss. */
-    var d = document.getElementById('ios-dbg');
-    if (!d) { d = document.createElement('div'); d.id = 'ios-dbg'; d.onclick = function(){ d.remove(); };
-      d.style.cssText = 'position:fixed;left:6px;bottom:96px;z-index:2147483647;background:rgba(0,0,0,.86);color:#0f0;font:11px/1.4 monospace;padding:7px 9px;border-radius:6px;white-space:pre;max-width:92vw';
-      document.body.appendChild(d); }
-    var ph = document.querySelector('.profile-header') || document.querySelector('#pcms-chrome');
-    var mr = mh ? mh.getBoundingClientRect() : null;
-    var pr = ph ? ph.getBoundingClientRect() : null;
-    var mhCS = mh ? getComputedStyle(mh) : null;
-    d.textContent = 'env=' + rawEnv + '  final=' + i + '  standalone=' + standalone
-      + '\nscreen=' + screen.width + 'x' + screen.height + ' dpr=' + window.devicePixelRatio + ' scrollY=' + Math.round(window.scrollY)
-      + '\nmh: pos=' + (mhCS ? mhCS.position : '-') + ' pad=' + (mhCS ? Math.round(parseFloat(mhCS.paddingTop)) : '-') + ' top=' + (mr ? Math.round(mr.top) : '-') + ' h=' + (mr ? Math.round(mr.height) : '-')
-      + '\nchrome/profile top=' + (pr ? Math.round(pr.top) : '-') + ' body.pt=' + Math.round(parseFloat(getComputedStyle(document.body).paddingTop));
+    var mhHidden = !mh || getComputedStyle(mh).display === 'none' || mh.offsetHeight === 0;
+    if (mhHidden) {
+      /* Mobile: the masthead is hidden (bottom-tab replaces it ≤767px) so it can't carry
+         the inset. Pad the body instead → the profile-header clears the island/notch. */
+      document.body.style.paddingTop = i + 'px';
+      if (mh) mh.style.paddingTop = '';
+    } else {
+      /* Desktop/landscape: the sticky masthead carries the inset in its own padding. */
+      document.body.style.paddingTop = '';
+      mh.style.paddingTop = 'calc(.55rem + ' + i + 'px)';
+    }
   }
   if (document.body) apply(); else document.addEventListener('DOMContentLoaded', apply);