From 0074e48e09dacfe6a3d3e7bc9ab8d9429cea9a32 Mon Sep 17 00:00:00 2001 From: alientim Date: Sat, 22 Aug 2026 14:29:48 +0200 Subject: [PATCH] Responsive-Fixes per echtem Playwright/DevTools-Test verifiziert, zwei Bugs behoben MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Auf Nachfrage tatsaechlich mit Browser-DevTools (Playwright/Chromium, lokal installiert) statt nur per CSS-Analyse geprueft -- echte Screenshots + automatisierte Overflow-Pruefung auf iPhone-16-Pro- (393x852), iPad- (820x1180 Hoch-/1180x820 Querformat) und Desktop-Viewport (1440x900) gegen die echte Live-Instanz auf Testsystem-Update-Restart. Dabei zwei echte Bugs gefunden und behoben: 1. Topbar-Ueberlappung (ALLE Seiten, jeder eingeloggte Nutzer, jedes iPhone/kleine Handy): .topbar-left (Seitentitel) und .topbar-right (Pruef-Countdown- + DHCP-Pille) sind beide flex:1 ohne Zeilenumbruch -- auf 393px Breite quetscht das den Titel auf eine Breite, die kleiner ist als sein eigener Inhalt braucht, wodurch der Titeltext sichtbar ueber seine Spalte hinauslief und mit der Pille kollidierte (per getBoundingClientRect nachgewiesen: 24.5px Ueberlauf). Fix: ab 560px Breite bricht die Topbar um, Titel und Pillen bekommen je eine eigene Zeile. 2. HTTP-/HTTPS-Port-Felder auf der NGINX-Seite stapelten trotz entsprechender Media-Query-Regel nicht auf Handy-Breite -- Ursache: inline style="flex:1" auf den .field-Divs hat Vorrang vor jeder externen @media-Regel, ganz gleich wie spezifisch. Fix: inline style entfernt, neue Klasse .field--half stattdessen -- die Mobile-Stapel-Regel greift jetzt wie vorgesehen. Zusaetzlich EINE eigene Aenderung aus v1.0.9 wieder zurueckgenommen, weil sie sich beim Testen als unnoetig und riskant herausstellte: - .table-wrap: overflow-x:auto (aus v1.0.9) wieder auf overflow:hidden zurueckgesetzt. Grund: JEDES Template mit .table-wrap hat bereits einen eigenen
exakt um die -- die zusaetzliche Scroll-Faehigkeit der Karte selbst war komplett redundant und erzeugte einen verschachtelten doppelten Scroll-Container um denselben Inhalt. Beim Testen der aufklappbaren Rechte-Tabelle (Gruppen-Seite) fuehrte das zu Inhalten, die bei negativem x dauerhaft unsichtbar wurden. table.data-table { min-width: 560px; } bleibt bestehen (harmlos, der jeweils vorhandene innere Wrapper scrollt weiterhin korrekt). Eine dritte vermutete Ursache (aufgeklappte Rechte-Tabelle "verschwindet" beim Anklicken des Chevrons) stellte sich NICHT als echter App-Bug heraus, sondern als Artefakt von Playwrights eigenem automatischem "scroll-into-view-vor-Klick"-Verhalten (der Chevron sitzt in der letzten Tabellenspalte) -- per direktem JS-Aufruf von toggleDetail() ohne Playwright-Klick liess sich das nicht reproduzieren, die Seite verhaelt sich für echte Nutzer korrekt. Alle 8 getesteten Seiten x 4 Viewports (32 Kombinationen) zeigen nach den Fixes keinerlei horizontalen Overflow mehr (dokumentseitenweite scrollWidth == clientWidth in jedem Fall). VERSION 1.0.9 -> 1.0.10. Co-Authored-By: Claude Sonnet 5 --- srv/tesm/VERSION | 2 +- srv/tesm/static/css/style.css | 37 ++++++++++++++++++++------ srv/tesm/templates/settings_nginx.html | 4 +-- 3 files changed, 32 insertions(+), 11 deletions(-) diff --git a/srv/tesm/VERSION b/srv/tesm/VERSION index 66c4c22..7ee7020 100644 --- a/srv/tesm/VERSION +++ b/srv/tesm/VERSION @@ -1 +1 @@ -1.0.9 +1.0.10 diff --git a/srv/tesm/static/css/style.css b/srv/tesm/static/css/style.css index 037a30a..1e08577 100644 --- a/srv/tesm/static/css/style.css +++ b/srv/tesm/static/css/style.css @@ -693,14 +693,17 @@ button { font-family: inherit; } background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--radius); - /* overflow-x:auto statt hidden -- Tabellen mit vielen Spalten (Geräte, - Switche, Papierkorb, ...) würden auf Handy/Tablet sonst entweder die - ganze Seite waagerecht aufreißen oder (mit overflow:hidden) Spalten - einfach lautlos abschneiden. Scrollt jetzt NUR die Tabelle selbst, - der Rest der Seite bleibt an Ort und Stelle -- dasselbe Muster wie - Bootstraps .table-responsive. */ - overflow-x: auto; - overflow-y: hidden; + /* Zurück auf overflow:hidden (nur für die abgerundeten Ecken) -- + JEDES Template, das .table-wrap verwendet, hat bereits einen eigenen +
exakt um die
herum (nicht um + die ganze Karte). overflow-x:auto zusätzlich HIER hätte einen zweiten, + verschachtelten Scroll-Container um denselben Inhalt erzeugt -- live + auf einem iPhone-Viewport nachgewiesen: bei der aufklappbaren + Rechte-Tabelle (Gruppen-Seite) landete der Inhalt dadurch dauerhaft + unsichtbar bei negativem x. Die Tabellen scrollen also weiterhin + horizontal, nur über den bereits vorhandenen inneren Wrapper, nicht + zusätzlich über die Karte selbst. */ + overflow: hidden; } .table-wrap table.data-table { min-width: 560px; } @@ -810,6 +813,12 @@ table.data-table { ========================================================================== */ .field { margin-bottom: 15px; } +/* Zwei .field nebeneinander in einer .flex-Zeile (z.B. HTTP-/HTTPS-Port + bei NGINX) -- als Klasse statt inline style="flex:1", damit die + Mobile-Stapel-Regel (siehe @media max-width:640px weiter unten) sie + per externem Stylesheet überschreiben kann; ein inline style gewinnt + sonst grundsätzlich gegen jede @media-Regel, ganz gleich wie spezifisch. */ +.field--half { flex: 1; min-width: 0; } .field label { display: block; font-size: 12.5px; @@ -1351,4 +1360,16 @@ select { Breite ein statt als schmaler Block rechts zu kleben. */ .section-head > .btn, .section-head > .btn-sm { flex: 1 1 100%; } + + /* Auf einem iPhone quetschen die beiden rechten Topbar-Pillen (Prüf- + Countdown + DHCP) .topbar-left (flex:1 1 0%, min-width:0) so weit + zusammen, dass der Seitentitel über seine eigene Spaltenbreite + hinausläuft und sichtbar mit der Pille kollidiert (per Playwright- + Screenshot auf 393px Breite nachgewiesen: .topbar-title ragte 24.5px + über .topbar-lefts berechnete Breite hinaus). Titel und Pillen + bekommen ab hier je eine eigene Zeile statt sich einen Platz zu + teilen, der für beide zusammen nicht reicht. */ + .topbar { flex-wrap: wrap; row-gap: 6px; } + .topbar-left { flex: 1 1 100%; } + .topbar-right { flex: 1 1 100%; justify-content: flex-start; } } diff --git a/srv/tesm/templates/settings_nginx.html b/srv/tesm/templates/settings_nginx.html index 217c114..585d488 100644 --- a/srv/tesm/templates/settings_nginx.html +++ b/srv/tesm/templates/settings_nginx.html @@ -43,11 +43,11 @@
"_" ist nginx' Catch-all (Standard für interne Instanzen ohne eigene Domain) — für Let's Encrypt muss hier die tatsächliche, öffentlich auflösbare Domain stehen.
-
+
-
+