mi/werkbaum
1
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases Wiki Activity

frontend: Cleanup mobile viewport height logic for better compatibility

Browse Source 
Removed redundant CSS fallbacks for mobile viewport height and replaced them with a streamlined `@supports` block to handle `dvh`-capable browsers. Clarified comments to reduce warnings and improve maintainability.
This commit is contained in:
mhoennig
2026-07-22 10:44:56 +02:00
parent 1cf60e2a75
commit ae8c32786d
1 changed files with 19 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/style.css
+19 -8
View File
@@ -47,6 +47,9 @@
--or:#0F766E; --or:#0F766E;
--warn:#B45309; --warn:#B45309;
--r:8px; --r:8px;
/* Exakte sichtbare Höhe; JS überschreibt sie auf documentElement aus
window.visualViewport.height (setViewportHeight). Default = Fallback. */
--app-height:100dvh;
} }
*{box-sizing:border-box;margin:0;padding:0} *{box-sizing:border-box;margin:0;padding:0}
body{ body{
@@ -56,19 +59,22 @@
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);
/* Mobile Viewport-Höhe: 100vh ist die *große* Höhe (inkl. Fläche hinter /* Mobile Viewport-Höhe: 100vh ist die *große* Höhe (inkl. Fläche hinter der
der unteren Browserleiste) — Footer/Editor-Titelzeile rutschen dahinter. unteren Browserleiste) — Footer/Editor-Titelzeile rutschen dahinter. Wo der
100dvh folgt der sichtbaren Fläche, versagt aber bei Browsern mit Browser die dvh-Einheit kennt, übersteuert der @supports-Block unten auf
Overlay-Leiste (z. B. Brave). Deshalb setzt JS zusätzlich --app-height --app-height (von JS aus window.visualViewport gesetzt, Default 100dvh) —
aus window.visualViewport.height (die wirklich sichtbare Höhe). Reihen- das folgt der wirklich sichtbaren Fläche (auch bei Overlay-Leisten wie in
folge = Fallback-Kaskade: vh → dvh → exakte JS-Höhe. */ Brave). Bewusst per @supports getrennt statt gestapelter height-Zeilen,
damit keine „height wird überschrieben"-Warnung entsteht. */
height:100vh; height:100vh;
height:100dvh;
height:var(--app-height, 100dvh);
overflow:hidden; overflow:hidden;
display:flex;flex-direction:column; display:flex;flex-direction:column;
padding:24px 20px 12px; padding:24px 20px 12px;
} }
/* dvh-fähige Browser: exakte sichtbare Höhe statt 100vh (siehe body oben). */
@supports (height:100dvh){
body{height:var(--app-height,100dvh)}
}
header{max-width:1200px;width:100%;margin:0 auto 16px;flex:0 0 auto} header{max-width:1200px;width:100%;margin:0 auto 16px;flex:0 0 auto}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:16px} .header-row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.header-tools{display:flex;align-items:center;gap:12px} .header-tools{display:flex;align-items:center;gap:12px}
@@ -120,6 +126,11 @@
Vertikal (Toggle an, .side): Editor links, Diagramm rechts. Vertikal (Toggle an, .side): Editor links, Diagramm rechts.
Zwischen beiden liegt ein verschiebbarer Gutter (Splitter). */ Zwischen beiden liegt ein verschiebbarer Gutter (Splitter). */
.app{ .app{
/* Defaults der laufzeit-gesetzten Custom-Properties (JS setzt sie als
Inline-Style: --col/--drow per Splitter, --pmin-d/-e per syncPanelMins).
Werte = die bisherigen var()-Fallbacks; die JS-Erkennung „hat der Nutzer
gezogen?" liest app.style (Inline) und bleibt davon unberührt. */
--col:360px;--drow:60%;--pmin-d:49px;--pmin-e:44px;
max-width:1200px;width:100%;margin:0 auto; max-width:1200px;width:100%;margin:0 auto;
flex:1 1 auto;min-height:0; flex:1 1 auto;min-height:0;
display:grid;gap:0; display:grid;gap:0;