Changeset f6b2c68 in Klonkt for src/views/partials/topnav.ejs

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.

File:

• src/views/partials/topnav.ejs (modified) (1 diff)

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); }
 }