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>
Drei Probleme mit v0.4 Mobile-Layout:
1. 140px Bottom-Panel frisst vertikalen Platz auf Phone
2. User muss zur 3D-Graph scrollen, die nicht interaktiv nutzbar ist
3. Resize zwischen Mobile/Tablet/Desktop an fixen Breakpoints ist holprig
Fix v0.5: Graph wird als Full-Screen-Modal über Toggle-Button gezeigt.
Neues Layout-System:
- Desktop >=1025px: obv default 3-panel, keine Toggles sichtbar
- Compact 601-1024px: 2-panel (Tree + Content), Graph als Toggle-Modal,
Toggle-Buttons für Tree UND Graph sichtbar im Header
- Mobile <=600px: 1-panel (nur Content), Tree als Hamburger (auto-hide
nach File-Selection), Graph als Toggle-Modal
Plus Mobile-Overflow-Fix:
- word-wrap + overflow-wrap auf Markdown-Content
- pre/code: white-space: pre-wrap + word-break: break-word
- table: display:block + overflow-x: auto
- img: max-width: 100%
Graph-Modal:
- Full-Screen overlay mit Backdrop
- Title-Bar + Close-Button (×)
- Three.js re-rendered in modal-canvas (für isolierte Performance)
- Click-to-Navigate vom Modal zurück in die Page
- ESC-Taste schließt Modal
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Drei Probleme mit der JS-Injection:
1. CSS kommt NACH First Paint → User sieht kurze obv-Layout, dann 'springt'
zu responsive Layout (FOUC = Flash of Unstyled Content)
2. JS-Injection kann fehlschlagen (head nicht ready, Browser-Inkonsistenzen)
3. Inline <style>-Tag wird nicht gecacht, lädt bei jedem Reload
Fix: hermes-custom.css als separate Datei, geladen via
<link rel='stylesheet'> im HEAD. Server liefert sie automatisch.
Außerdem: Mobile-Mode zeigt Graph als Bottom-Panel (140px), nicht mehr
display:none. User behält Wiki-Beziehungen auch auf Phone.
vault-custom.js.js behält injectResponsiveCSS als no-op für Backward-Compat.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
agentandClaude