Alexander/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(header): drop extra 12px gap when safe-area inset is present
CI / update (push) Has been cancelled
Details

Browse Source 
In PWA / Tauri shells with a notch or status bar, the header bar was
stacking 12px on top of the safe-area inset, leaving the bar far below
the system chrome. Use max(12px, inset + 4px) so the constant gap only
applies when there is no inset; otherwise the bar sits 4px below the
inset edge.
This commit is contained in:
Alexander Bocken
2026-05-10 13:00:25 +02:00
parent 60e651de72
commit 685f4cc892
2 changed files with 7 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{ {
"name": "homepage", "name": "homepage",
"version": "1.69.0", "version": "1.69.1",
"private": true, "private": true,
"type": "module", "type": "module",
"scripts": { "scripts": {
src/lib/components/Header.svelte
+6 -2
View File
@@ -47,14 +47,18 @@ footer {
═══════════════════════════════════════════ */ ═══════════════════════════════════════════ */
nav { nav {
position: sticky; position: sticky;
top: calc(12px + env(safe-area-inset-top, 0px)); /* Without a safe-area inset (regular browser tabs), keep the comfortable
12px gap. With an inset present (PWA / Tauri shell with notch / status
bar), drop the extra 12px so the bar sits just 4px below the inset
instead of stacking ~56px down. */
top: max(12px, calc(env(safe-area-inset-top, 0px) + 4px));
z-index: 100; z-index: 100;
display: flex; display: flex;
align-items: center; align-items: center;
height: var(--header-h); height: var(--header-h);
gap: 0.4rem; gap: 0.4rem;
padding: 0 0.8rem; padding: 0 0.8rem;
margin: calc(12px + env(safe-area-inset-top, 0px)) auto 0; margin: max(12px, calc(env(safe-area-inset-top, 0px) + 4px)) auto 0;
width: fit-content; width: fit-content;
max-width: calc(100% - 1.5rem); max-width: calc(100% - 1.5rem);
border-radius: 100px; border-radius: 100px;