From 685f4cc89269943ba7ee9f8ded8e90a63e1adaa8 Mon Sep 17 00:00:00 2001
From: Alexander Bocken <alexander@bocken.org>
Date: Sun, 10 May 2026 13:00:25 +0200
Subject: [PATCH] fix(header): drop extra 12px gap when safe-area inset is
 present

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.
---
 package.json                     | 2 +-
 src/lib/components/Header.svelte | 8 ++++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index d54de50e..1ec784c2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "homepage",
-	"version": "1.69.0",
+	"version": "1.69.1",
 	"private": true,
 	"type": "module",
 	"scripts": {
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index 1dc6ca47..fc1c91f4 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -47,14 +47,18 @@ footer {
    ═══════════════════════════════════════════ */
 nav {
 	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;
 	display: flex;
 	align-items: center;
 	height: var(--header-h);
 	gap: 0.4rem;
 	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;
 	max-width: calc(100% - 1.5rem);
 	border-radius: 100px;