agent/hermes-wiki-static
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v0.5.1: iOS Safe-Area + dvh fixes für Mobile-Buttons

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
agent
2026-07-17 04:14:36 +00:00
co-authored by Claude
parent 5e0f8d87a8
commit 384281c747
2 changed files with 28 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
hermes-custom.css
+27
View File
@@ -14,13 +14,40 @@
*/ */
/* === Always-on === */ /* === 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,
.vault-app.hermes-rc * { .vault-app.hermes-rc * {
box-sizing: border-box !important; box-sizing: border-box !important;
} }
.vault-app.hermes-rc { .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; width: 100% !important;
max-width: 100vw !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; overflow-x: hidden !important;
} }
.vault-app.hermes-rc .vault-content { .vault-app.hermes-rc .vault-content {
vault.html
+1 -1
View File
@@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>Vault Viewer</title> <title>Vault Viewer</title>
<link rel="stylesheet" href="hermes-custom.css"> <link rel="stylesheet" href="hermes-custom.css">
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>