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.8
+1.0.10

srv/tesm/static/css/style.css

@@ -197,13 +197,23 @@ button { font-family: inherit; }
 .nav-group.expanded .nav-group-children { display: flex; }
 .nav-group-children .nav-item { font-size: 13px; padding: 8px 12px; }
 
-/* Kacheln nebeneinander (z.B. Im-/Export, Konto-Seite) */
+/* Kacheln nebeneinander (z.B. Im-/Export, Konto-Seite). minmax(min(...,
+   100%), 1fr) statt eines nackten Pixelwerts -- eine Spalten-Mindestbreite
+   von z.B. 340px würde auf einem 375px-iPhone (abzüglich .content-Padding)
+   sonst waagerechten Overflow der ganzen Seite erzwingen, weil "auto-fit"
+   erst ab einer Breite größer als der Mindestwert umbricht. */
 .settings-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
   gap: 24px;
   align-items: start;
 }
+/* Modifier für Seiten, die etwas breitere Karten brauchen (z.B. NGINX,
+   LDAP) -- ersetzt frühere inline style="grid-template-columns:..."
+   Overrides, die denselben 100%-Fallback nicht hatten. */
+.settings-grid--wide {
+  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
+}
 
 /* Navbar-Reihenfolge (Settings) */
 .nav-order-list {
@@ -683,8 +693,19 @@ button { font-family: inherit; }
   background: var(--bg-card);
   border: 1px solid var(--border-soft);
   border-radius: var(--radius);
+  /* Zurück auf overflow:hidden (nur für die abgerundeten Ecken) --
+     JEDES Template, das .table-wrap verwendet, hat bereits einen eigenen
+     <div style="overflow-x:auto;"> exakt um die <table> 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; }
 
 .table-toolbar {
   display: flex;
@@ -792,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;
@@ -1156,8 +1183,14 @@ select {
      Logs mit nur R). Feste/zu schmale Breiten haben die D-Spalte bei
      Geräte zuvor lautlos in den Overflow geschoben. */
   flex: 0 0 auto;
+  max-width: 100%;
   padding-right: 28px;
   border-right: 1px solid var(--border-soft);
+  /* Fällt eine einzelne Spalte (z.B. Geräte mit vielen Rechten-Spalten)
+     trotz .permission-groups-row's flex-wrap auf einem schmalen Screen
+     für sich genommen noch zu breit aus, scrollt nur diese eine Spalte
+     waagerecht statt die Seite aufzureißen. */
+  overflow-x: auto;
 }
 .permission-group-col:last-child { border-right: none; padding-right: 0; }
 .permission-group-header-cell { padding-left: 0 !important; }
@@ -1286,14 +1319,57 @@ select {
   .content { padding: 18px 16px 40px; }
   .topbar { padding: 10px 16px; }
   .topbar-logo { opacity: 0.5; }
+
+  /* Ab hier iPad-Breite (900px ist bereits der bestehende Sidebar-
+     Umschaltpunkt) und schmaler: generische Button-/Toolbar-Zeilen
+     (.flex) sollen umbrechen statt seitlich überzulaufen -- betrifft vor
+     allem Kopfzeilen mit mehreren Aktions-Buttons (z.B. NGINX-, Logs-,
+     Verlauf-Seite) und nebeneinander angeordnete Formularfelder. */
+  .flex { flex-wrap: wrap; }
+  .section-head { flex-wrap: wrap; }
+  .term-toolbar, .log-toolbar { flex-wrap: wrap; row-gap: 8px; }
+  .detail-row { flex-wrap: wrap; }
+  .detail-row .v { text-align: left; }
+
+  /* Modal-Fußzeilen (Speichern/Abbrechen) und Tabellen-Kopfzeilen
+     (Suche + Aktion) sollen bei wenig Platz ebenfalls umbrechen statt
+     Buttons/Suchfeld ineinanderzuschieben. */
+  .modal-footer { flex-wrap: wrap; }
+  .table-toolbar .search-input { min-width: 0; flex: 1 1 160px; }
 }
 
 @media (max-width: 640px) {
   .topbar-logo { display: none; }
+
+  /* Formulare mit zwei nebeneinander angeordneten Feldern (class="flex
+     gap-2" um zwei .field-Divs, z.B. HTTP-/HTTPS-Port bei NGINX) stapeln
+     auf Handy-Breite volle Breite pro Feld statt zwei sehr schmale
+     Eingaben nebeneinander zu erzwingen. */
+  form .flex > .field { flex-basis: 100%; }
+
+  .modal-header, .modal-body, .modal-footer { padding-left: 16px; padding-right: 16px; }
 }
 
 @media (max-width: 560px) {
   .device-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
   .topbar-title { font-size: 16px; }
   .stat-row { grid-template-columns: repeat(2, 1fr); }
+
+  /* Button-Leisten in Kopfzeilen (z.B. section-head/card-Kopf mit
+     "RAW anzeigen" o.ä.) nehmen auf sehr schmalen Screens die volle
+     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_ldap.html

@@ -5,7 +5,7 @@
 {% block page_sub %}<div class="topbar-sub">Anmeldung mit dem Domänen-Passwort, zusätzlich zu lokalen Konten</div>{% endblock %}
 
 {% block content %}
-<div class="settings-grid" style="grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));">
+<div class="settings-grid settings-grid--wide">
 
   <div class="card card-pad">
     <div class="section-head" style="margin-bottom:16px;">

srv/tesm/templates/settings_nginx.html

@@ -5,7 +5,7 @@
 {% block page_sub %}<div class="topbar-sub">Reverse-Proxy: Domain, Ports, SSL/HSTS und Zertifikat</div>{% endblock %}
 
 {% block content %}
-<div class="settings-grid" style="grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));">
+<div class="settings-grid settings-grid--wide">
 
   <div class="card card-pad">
     <div class="section-head" style="margin-bottom:16px;">
@@ -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>