k1nq/TREK
1
0
Fork 0
mirror of https://github.com/mauriceboe/TREK.git synced 2026-06-21 22:31:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: offline banner no longer covers the top of the app (#813)

Browse Source 
OfflineBanner was fixed at top:0 but the rest of the page had no
idea it was visible, so on mobile (and the desktop nav on wider
screens) the banner sat on top of the header content.

When the banner is visible it now sets --offline-banner-h on <html>;
body reserves that space via padding-top, and the desktop fixed
Navbar shifts its top by the same amount. When back online the var
is removed and everything snaps back.
This commit is contained in:
Maurice
2026-04-21 22:10:11 +02:00
parent 82b16a4bf5
commit 906d8821a4
3 changed files with 22 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/index.css
+5 -1
View File
@@ -431,6 +431,8 @@ input[type="number"], input[type="time"], input[type="date"], input[type="dateti
--safe-top: env(safe-area-inset-top, 0px);
--nav-h: 0px;
--bottom-nav-h: 0px;
/* Set by OfflineBanner when it's visible so body can reserve space. */
--offline-banner-h: 0px;
--font-system: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
--sp-1: 4px;
--sp-2: 8px;
@@ -536,7 +538,9 @@ body {
font-family: var(--font-system);
background-color: var(--bg-primary);
color: var(--text-primary);
transition: background-color 0.2s, color 0.2s;
transition: background-color 0.2s, color 0.2s, padding-top 0.15s ease;
/* Reserve space when OfflineBanner is visible; 0 when online. */
padding-top: var(--offline-banner-h, 0px);
}
/* ── Marker cluster custom styling ────────────── */