Responsive-Fixes per echtem Playwright/DevTools-Test verifiziert, zwei Bugs behoben
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 <div style="overflow-x:auto;"> exakt um die <table> -- 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 <noreply@anthropic.com>
This commit is contained in:
@@ -43,11 +43,11 @@
|
||||
<div class="field-hint">"_" 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.</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<div class="field" style="flex:1;">
|
||||
<div class="field field--half">
|
||||
<label for="http_port">HTTP-Port</label>
|
||||
<input type="number" name="http_port" id="http_port" min="1" max="65535" value="{{ http_port }}" required>
|
||||
</div>
|
||||
<div class="field" style="flex:1;">
|
||||
<div class="field field--half">
|
||||
<label for="https_port">HTTPS-Port</label>
|
||||
<input type="number" name="https_port" id="https_port" min="1" max="65535" value="{{ https_port }}" required>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user