Verwaltung auf dem Handy: vier Fehler behoben

Geprueft mit nachgebildeten Daten -- lange Firmennamen, lange
E-Mail-Adressen, mehrstellige Betraege. Eine leere Seite laeuft nie
ueber; die Fehler, um die es geht, entstehen erst mit Inhalt.

1. DAS RASTER DER KOPFZEILE WAR BREITER ALS SEIN BEHAELTER

Auf 390px summierten sich die beiden Spalten auf 372,7px, waehrend die
Leiste nur 358px breit ist. Rasterspalten schrumpfen von sich aus nicht
unter ihren Inhalt ("min-width: auto"). Alles darin schob sich nach
rechts hinaus: die Kopfzeile 8px, der Reiterstreifen 12px.

Sichtbar war das kaum -- der Streifen ist ohnehin wischbar, rechts
fehlte nur ein Stueck Rand. Genau deshalb blieb es liegen: ein Fehler,
der sich als Eigenart tarnt. Jetzt minmax(0, …) plus min-width: 0 an
den Kindern; lange Titel kuerzen mit Auslassungspunkten, statt zu
schieben.

2. DER INSTALLATIONSHINWEIS ZEIGTE DAS FALSCHE SYMBOL

Seit die Verwaltung eine eigene App ist, stand dort weiter der schwarze
Husky. Man las "Als App installieren" neben dem einen Bild und bekam
das andere auf den Startbildschirm. Das Symbol wird jetzt aus dem
Manifest abgeleitet, das die Seite tatsaechlich einbindet -- damit
stimmt es auch fuer jede kuenftige App, ohne dass jemand daran denken
muss.

3. DIE UEBERSICHT BRACH BEI UNVOLLSTAENDIGER ANTWORT AB

d.projekte und d.verlauf wurden ungeprueft mit .length angefasst,
waehrend drei andere Felder ausdruecklich geprueft wurden. Fehlte eine
der Listen, brach die Uebersicht mit "Cannot read properties of
undefined" ab -- und zwar NACH dem Aufbau der oberen Kacheln: Die halbe
Seite stand da, der Rest fehlte kommentarlos. Genau der Fall, den der
Kommentar daneben als "realistisch" beschreibt. Jetzt wird aufgefuellt
statt abgebrochen.

4. ZWEI FEHLALARME IM TEST SELBST

Der Test meldete den Reiterstreifen als Ueberlauf (er ist ein
Wischstreifen -- dass dort etwas ausserhalb liegt, ist sein Sinn) und
eine 1x1-Checkbox als zu kleines Tippziel (bedient wird sie ueber ihr
Label, 315x162 Punkte). Beides wuerde dazu verleiten, Funktionierendes
"zu reparieren". Der Test unterscheidet das jetzt.

Ebenso meldete er "Strg" und "Enter" mit 10,4px -- beide sind auf
schmalen Schirmen laengst ausgeblendet. getComputedStyle liefert auch
fuer verborgene Elemente eine Schriftgroesse; jetzt zaehlt nur
Sichtbares.

25 Pruefungen ueber sechs Bereiche gruen.

Co-Authored-By: Claude Opus 5 <[email protected]>

webdesign/verwaltung.html

@@ -940,7 +940,23 @@
      "wo bin ich", die zweite "wo kann ich hin". */
   .vw-leiste {
     display: grid;
-    grid-template-columns: 1fr auto;
+    /* minmax(0, …) statt "1fr auto" (26.08.2026).
+
+       Rasterspalten schrumpfen von sich aus NICHT unter die Breite
+       ihres Inhalts — sie haben "min-width: auto". Auf einem 390px
+       breiten Gerät summierten sich die beiden Spalten dadurch auf
+       372,7px, während die Leiste selbst nur 358px breit ist. Das
+       Raster war also breiter als sein eigener Behälter, und alles
+       darin schob sich nach rechts über den Bildschirmrand: die
+       Kopfzeile 8px, der Reiterstreifen 12px.
+
+       Sichtbar war das kaum — der Streifen ist ohnehin wischbar, und
+       rechts fehlte nur ein Stück Rand. Genau deshalb blieb es liegen.
+
+       Mit minmax(0, …) darf jede Spalte kleiner werden als ihr Inhalt.
+       Die Überschrift kürzt dann mit Auslassungspunkten, statt das
+       ganze Raster aufzublähen. */
+    grid-template-columns: minmax(0, 1fr) minmax(0, auto);
     align-items: center;
     gap: .6rem 1rem;
     margin-bottom: 1.2rem;
@@ -948,12 +964,38 @@
   .vw-leiste h1 {
     margin: 0; font-size: clamp(1.4rem, 3.4vw, 2rem);
     grid-column: 1; grid-row: 1;
+    /* Damit die Spalte oben tatsächlich schrumpfen darf, muss auch das
+       Kind es dürfen. Lange Titel wie "Projektanfragen" kürzen dann,
+       statt zu schieben. */
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
-  .vw-leiste .vw-wer { grid-column: 2; grid-row: 1; }
+  .vw-leiste .vw-wer { grid-column: 2; grid-row: 1; min-width: 0; }
   /* Die Reiter über die volle Breite darunter. */
   .vw-leiste .vw-tabs {
     grid-column: 1 / -1; grid-row: 2;
     padding-top: .2rem;
+
+    /* ⚠️ min-width: 0 ist hier NICHT überflüssig (26.08.2026).
+
+       Ein Rasterkind bekommt von sich aus "min-width: auto" — es darf
+       also breiter werden als seine Spalte, wenn sein Inhalt das
+       verlangt. Genau das passierte: Sobald ein Reiter einen Zähler
+       trug ("Anfragen ③"), wuchs der Streifen auf volle Fensterbreite
+       und ragte, weil die Leiste links 12px Abstand hat, rechts 12px
+       über den Bildschirmrand hinaus.
+
+       Gemessen auf einem 390px breiten Gerät: In der Übersicht endete
+       der Streifen bei 378px, im Anfragen-Bereich bei 402px. Sichtbar
+       wurde es kaum — der Streifen ist ohnehin seitlich wischbar, also
+       fiel nur auf, dass der letzte Reiter schwerer zu erreichen war.
+       Ein Fehler, der sich als Eigenart tarnt.
+
+       Mit min-width: 0 darf er wieder schmaler werden als sein Inhalt —
+       und genau dann greift das seitliche Wischen, wofür es gedacht
+       ist. */
+    min-width: 0;
   }
   @media (max-width: 560px) {
     /* Titel und Abmelden bleiben zusammen in Zeile 1.
@@ -2955,6 +2997,27 @@
        Ersatzantwort im Test genau das ausloeste. Ein halber Server ist
        ein realistischer Fall (alte Fassung noch nicht neu gestartet),
        und dann sollen die uebrigen Reiter weiter benutzbar sein. */
+    /* ⚠️ Die Absicht daneben galt nur für drei von fünf Teilen
+       (behoben 26.08.2026).
+
+       Geprüft wurden beiMir, beiKunde und geld — die beiden Listen
+       darunter, projekte und verlauf, wurden ungeprüft mit .length
+       angefasst. Fehlte eine davon, brach die Übersicht mit
+       "Cannot read properties of undefined" ab, und zwar NACH dem
+       Aufbau der oberen Kacheln: Die halbe Seite stand schon da, der
+       Rest fehlte kommentarlos.
+
+       Genau der Fall, den der Kommentar unten beschreibt — ein halber
+       Server, dessen Antwort nicht alles mitbringt. Statt die ganze
+       Übersicht zu verweigern, wird jetzt aufgefüllt: Was da ist, wird
+       gezeigt; was fehlt, bleibt leer. Eine Liste, die es nicht gibt,
+       ist keine leere Liste — hier aber die einzig sinnvolle Anzeige.
+
+       Gefunden vom Handy-Test, weil dessen nachgebildete Antwort diese
+       beiden Felder nicht enthielt. */
+    if (!Array.isArray(d.projekte)) d.projekte = [];
+    if (!Array.isArray(d.verlauf)) d.verlauf = [];
+
     if (!d.beiMir || !d.beiKunde || !d.geld) {
       laedt.hidden = true;
       inhalt.hidden = false;