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>

srv/tesm/VERSION

@@ -1 +1 @@
-1.0.9
+1.0.10

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,
+  /* Zurück auf overflow:hidden (nur für die abgerundeten Ecken) --
-     Switche, Papierkorb, ...) würden auf Handy/Tablet sonst entweder die
+     JEDES Template, das .table-wrap verwendet, hat bereits einen eigenen
-     ganze Seite waagerecht aufreißen oder (mit overflow:hidden) Spalten
+     <div style="overflow-x:auto;"> exakt um die <table> herum (nicht um
-     einfach lautlos abschneiden. Scrollt jetzt NUR die Tabelle selbst,
+     die ganze Karte). overflow-x:auto zusätzlich HIER hätte einen zweiten,
-     der Rest der Seite bleibt an Ort und Stelle -- dasselbe Muster wie
+     verschachtelten Scroll-Container um denselben Inhalt erzeugt -- live
-     Bootstraps .table-responsive. */
+     auf einem iPhone-Viewport nachgewiesen: bei der aufklappbaren
-  overflow-x: auto;
+     Rechte-Tabelle (Gruppen-Seite) landete der Inhalt dadurch dauerhaft
-  overflow-y: hidden;
+     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; }
 }

srv/tesm/templates/settings_nginx.html

@@ -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>