frontend: Mobile-Höhe per 100dvh statt 100vh (Panel hinter Browserleiste)

Auf Mobilgeräten ist 100vh die große Viewport-Höhe inkl. der Fläche hinter der
unteren Browserleiste — Footer und die eingeklappte Editor-Titelzeile rutschen
dahinter und sind nicht antippbar. 100dvh (dynamische Viewport-Höhe) folgt der
sichtbaren Fläche; 100vh bleibt als Fallback für alte Browser.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
mhoennig
2026-07-21 19:26:14 +02:00
co-authored by Claude Opus 4.8
parent fe818b6c2c
commit e97d168ef6
+7 -1
View File
@@ -27,7 +27,13 @@
repeating-linear-gradient(0deg,transparent 0 23px,var(--grid) 23px 24px), repeating-linear-gradient(0deg,transparent 0 23px,var(--grid) 23px 24px),
repeating-linear-gradient(90deg,transparent 0 23px,var(--grid) 23px 24px), repeating-linear-gradient(90deg,transparent 0 23px,var(--grid) 23px 24px),
var(--paper); var(--paper);
height:100vh;overflow:hidden; /* 100vh ist auf Mobilgeräten die *große* Viewport-Höhe (inkl. Fläche
hinter der unteren Browserleiste) — Footer/Editor-Titelzeile rutschen
dahinter. 100dvh = dynamische Viewport-Höhe, folgt der sichtbaren
Fläche. vh bleibt als Fallback für alte Browser. */
height:100vh;
height:100dvh;
overflow:hidden;
display:flex;flex-direction:column; display:flex;flex-direction:column;
padding:24px 20px 12px; padding:24px 20px 12px;
} }