Bestehendes eigenes Design-System beibehalten (kein Bootstrap-Framework
eingebunden), stattdessen die vorhandenen Media Queries/Breakpoints
(Sidebar kollabiert bereits ab 900px) um die fehlenden Faelle ergaenzt:
- .table-wrap: overflow:hidden -> overflow-x:auto. Tabellen mit vielen
Spalten (Geraete, Switche, Papierkorb, Benutzer, ...) haben auf
schmalen Screens bisher entweder Spalten lautlos abgeschnitten oder
die ganze Seite waagerecht aufgerissen -- jetzt scrollt NUR die
Tabelle selbst (gleiches Prinzip wie Bootstraps .table-responsive).
table.data-table bekommt zusaetzlich eine min-width als sinnvolle
Scroll-Schwelle.
- .settings-grid: minmax(340px, 1fr) -> minmax(min(340px, 100%), 1fr) --
ein nackter Pixel-Mindestwert erzwingt auf einem 375px-iPhone sonst
waagerechten Overflow der ganzen Seite, sobald die Spalte breiter als
der verfuegbare Platz ist. Neue Modifier-Klasse .settings-grid--wide
(420px-Variante) ersetzt zwei betroffene inline
style="grid-template-columns:minmax(420px,...)"-Overrides (LDAP-,
NGINX-Seite), die denselben 100%-Fallback nicht hatten.
- .permission-group-col: eigenes overflow-x:auto zusaetzlich zum
bestehenden flex-wrap der Elternzeile -- falls eine einzelne
Rechte-Spalte (z.B. Geraete mit R/W/E/D) auch nach dem Umbruch auf
eine eigene Zeile noch zu breit ist.
- Ab 900px (bestehender Sidebar-Breakpoint) zusaetzlich: .flex (generische
Button-/Toolbar-Zeilen), .section-head, .term-toolbar/.log-toolbar und
.detail-row brechen um statt seitlich ueberzulaufen; .modal-footer
ebenso; .search-input in Tabellen-Toolbars schrumpft flexibel.
- Ab 640px: nebeneinander angeordnete Formularfelder (z.B. HTTP-/HTTPS-
Port bei NGINX) stapeln sich auf volle Breite statt zwei sehr schmale
Eingaben zu erzwingen; Modal-Innenabstand etwas schmaler.
- Ab 560px: Buttons in Kopfzeilen (section-head) nehmen die volle Breite
ein statt als schmaler Block rechts zu kleben.
Live auf Testsystem-Update-Restart verifiziert: alle Kernseiten
(Dashboard, Clients, Switche, Gruppen, LDAP, NGINX, Live-Log, Wartung)
laden weiterhin fehlerfrei (200) nach dem CSS-/Template-Austausch.
WICHTIGER HINWEIS: In dieser Umgebung steht kein Browser-Screenshot-
Werkzeug zur Verfuegung, die Aenderungen wurden also nicht pixelgenau auf
echten iPhone-16-Pro-/iPad-Bildschirmgroessen gegengeprueft, sondern rein
ueber CSS-Analyse und Seiten-Ladetests. Ein Blick auf einem echten Geraet
(oder per Browser-Devtools-Emulation) wird empfohlen.
VERSION 1.0.8 -> 1.0.9.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
alientimandClaude Sonnet 5
a3f5f028f2