From 384281c74751dff85d6a47f3d88fea68b3de27dc Mon Sep 17 00:00:00 2001 From: agent Date: Fri, 17 Jul 2026 04:14:36 +0000 Subject: [PATCH] =?UTF-8?q?v0.5.1:=20iOS=20Safe-Area=20+=20dvh=20fixes=20f?= =?UTF-8?q?=C3=BCr=20Mobile-Buttons?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Problem: Buttons waren auf iOS hinter der Titelleiste / Dynamic Island versteckt, weil .vault-app die iOS Safe-Area nicht respektiert hat. Fixes: 1. viewport-fit=cover im Meta-Tag (sicherstellt dass env() berechnet wird) 2. :root CSS-Variablen für Safe-Area-Inset (top/right/bottom/left) 3. .vault-app.hermes-rc bekommt padding-top/bottom/left/right = var(--sat) etc. -> Header-Bar und damit alle Buttons werden unter die iOS-Statusleiste geschoben 4. height: 100dvh mit 100vh fallback (iOS Safari Bug: 100vh enthaelt URL-Bar) Plus: body margin/padding = 0 (war ein Bug, dass Browser-Defaults reinfunkten) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- hermes-custom.css | 27 +++++++++++++++++++++++++++ vault.html | 2 +- 2 files changed, 28 insertions(+), 1 deletion(-) diff --git a/hermes-custom.css b/hermes-custom.css index 13b2e51..b0d46ab 100644 --- a/hermes-custom.css +++ b/hermes-custom.css @@ -14,13 +14,40 @@ */ /* === Always-on === */ +:root { + /* iOS safe-area inset variables for cross-browser usage */ + --sat: env(safe-area-inset-top, 0px); + --sab: env(safe-area-inset-bottom, 0px); + --sal: env(safe-area-inset-left, 0px); + --sar: env(safe-area-inset-right, 0px); +} + +html, body { + /* Prevent iOS from auto-shrinking — keep our viewport stable */ + height: 100%; + overflow: hidden; + box-sizing: border-box; + margin: 0; + padding: 0; +} + .vault-app.hermes-rc, .vault-app.hermes-rc * { box-sizing: border-box !important; } .vault-app.hermes-rc { + /* Use dvh (dynamic viewport height) with vh fallback. dvh excludes iOS + URL-bar from the 100vh, so the app fills the visible area. + Padding-top pushes the grid below the iOS status bar / Dynamic Island. */ width: 100% !important; max-width: 100vw !important; + height: 100vh !important; /* fallback */ + height: 100dvh !important; /* modern browsers (incl. iOS 16+) */ + padding-top: var(--sat) !important; + padding-left: var(--sal) !important; + padding-right: var(--sar) !important; + padding-bottom: var(--sab) !important; + overflow: hidden !important; overflow-x: hidden !important; } .vault-app.hermes-rc .vault-content { diff --git a/vault.html b/vault.html index 748cb78..9e2bc8f 100644 --- a/vault.html +++ b/vault.html @@ -2,7 +2,7 @@ - + Vault Viewer