922 px auf einem 844-px-Bildschirm -- die halbe Antwort war zu wenig

VanVan im Support, Meldung #15: „Die Modis koennen die Antworten auf
die Bewerbungen im Bereich eure Aufgaben noch nicht einklappen. Das
wird mit der Zeit unuebersichtlich."

Heute Nacht habe ich dazu „Verstanden" gebaut: Gelesenes rutscht
hinter eine zugeklappte Zeile. Das ist richtig und war trotzdem nur
die halbe Antwort -- denn UNGELESENE stehen absichtlich offen da,
und davon hat ein Modi im Haus gerade neun.

GEMESSEN STATT GESCHAETZT, an seinem echten Bestand nachgebaut, auf
dem Handy (390 x 844 px):

    Band:            922 px   -- hoeher als das ganze Fenster
    Anteil der Seite: 49 %

Das IST ihr Satz. Mein Umbau loeste es erst NACH einem Griff auf
„Alle verstanden"; bis dahin stand die Wand unveraendert da.

GEAENDERT: Hoechstens drei stehen offen, der Rest ist einen Griff
entfernt („und 6 weitere"). Danach:

    Band:            566 px   -- passt in den Bildschirm
    nach einem Griff: 46 px   (zugeklappte Zeile)

WARUM NICHT NULL: Eine Absage, die man aufklappen muss, ist keine
Nachricht mehr -- das war die Begruendung vom 30.09., und sie gilt.
WARUM NICHT ALLE: siehe oben. Drei ist die Zahl, bei der Kopf,
Zeilen und Sammelknopf unter einem Bildschirm bleiben.

DIE NEUESTEN ZUERST -- der Server sortiert nach `entschieden_am
DESC`. Wer nicht aufklappt, hat die juengsten gesehen.

GEPRUEFT -- pruef-bewerbung-aufgaben 178 -> 184 ok

    mit fuenf Ungelesenen stehen drei offen (3)
      und der Rest ist einen Griff entfernt („und 3 weitere")
      das Band passt in den Bildschirm (436 px bei 1000 px)
    aufgeklappt stehen alle da (6, „Weniger zeigen")
    und wieder zu — der Knopf geht in beide Richtungen
    und die Probezeilen sind wieder weg — der Stand ist wie vorher

Die dritte Zeile ist die eigentliche Aussage: „drei Zeilen" waere
eine Zahl, „passt in den Bildschirm" ist der Zweck. Die letzte raeumt
die vier Probezeilen wieder weg -- ohne sie zaehlten die Pruefungen
darunter („1 aeltere Antwort", „2 aeltere Antworten") sechs statt
zwei und wuerden rot, ohne dass etwas kaputt ist.

Der Knopf geht in BEIDE Richtungen, und auch das steht da: Sonst
waere er ein Einwegschalter, und das faellt erst auf, wenn jemand
zurueckklappen will.

AUSSERDEM AN CASPERLINOS ECHTEN NEUN GEMESSEN (Kopie der Datenbank,
eigener Port, nichts im Live-System): neun Antworten, alle
ungelesen; „Verstanden" nimmt genau eine; „Alle verstanden" den
Rest; nachlesbar bleiben alle neun; ein zweiter Druck zaehlt null;
eine fremde Nummer gibt 404.

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

server/pruef-bewerbung-aufgaben.mjs

@@ -877,6 +877,102 @@ melde("=== 6. Am echten Bildschirm ===");
         const vorher = await stand();
         ok(vorher.neuZeilen >= 1 && vorher.knopf === true,
           `die ungelesene Antwort steht offen da, mit „Verstanden" (${vorher.neuZeilen})`);
+
+        /* ==== HOECHSTENS DREI AUF EINMAL (03.10.2026) =============
+
+           GEMESSEN AM ECHTEN BESTAND, nicht geschaetzt: Ein Modi im
+           Haus hat NEUN beantwortete Bewerbungen liegen, alle
+           ungelesen. Auf dem Handy war das Band damit 922 px hoch --
+           bei 844 px Fenster, also hoeher als der ganze Bildschirm
+           und 49 % der Seite. Das ist woertlich VanVans Satz: „Das
+           wird mit der Zeit unuebersichtlich."
+
+           Mit dem Deckel sind es 566 px, und ein Griff auf „Alle
+           verstanden" macht daraus 46 px.
+
+           DIE ZAHL DREI GEHOERT GEPRUEFT, nicht nur in den
+           Quelltext. Deshalb bekommt Frida hier vier weitere
+           beantwortete Bewerbungen -- erst ab vier greift der
+           Deckel, und ohne ihn waere diese Pruefung gruen, ohne
+           etwas gesehen zu haben. */
+        {
+          const dx = new DatabaseSync(process.env.WORKSPACE_DB);
+          const nun = new Date().toISOString();
+          for (let i = 0; i < 4; i++) {
+            dx.prepare(`INSERT INTO vorlagen_bewerbungen
+                (vorlage, kategorie, person_id, text, zustand, entscheid_text,
+                 entschieden_von, entschieden_am, erstellt)
+              VALUES (?,?,?,?,?,?,?,?,?)`)
+              .run(`deckel-probe-${i}`, "chat", idModi, "Die auch gern.",
+                "angenommen", null, idHand, nun, nun);
+          }
+          dx.close();
+        }
+        await m5.s.reload({ waitUntil: "networkidle" });
+        await m5.s.waitForTimeout(1800);
+        const gedeckelt = await m5.s.evaluate(() => {
+          const band = document.querySelector('.vorlagenbrett__antwort:not([data-alt])');
+          return {
+            zeilen: band ? band.querySelectorAll(".vorlagenbrett__antwort-zeile").length : 0,
+            hoch: band ? Math.round(band.getBoundingClientRect().height) : 0,
+            knopf: band
+              ? (band.querySelector(".vorlagenbrett__antwort-kopf")?.innerText || "")
+                .replace(/\s+/g, " ").trim()
+              : "",
+            fenster: window.innerHeight,
+          };
+        });
+        ok(gedeckelt.zeilen === 3,
+          `mit fuenf Ungelesenen stehen drei offen (${gedeckelt.zeilen})`);
+        ok(/und \d+ weitere/.test(gedeckelt.knopf),
+          `  und der Rest ist einen Griff entfernt („${gedeckelt.knopf}")`);
+        /* DER EIGENTLICHE PUNKT IST DIE HOEHE. „Drei Zeilen" waere
+           eine Zahl; dass das Band unter den Bildschirm passt, ist
+           die Aussage. */
+        ok(gedeckelt.hoch > 0 && gedeckelt.hoch < gedeckelt.fenster,
+          `  das Band passt in den Bildschirm (${gedeckelt.hoch} px bei `
+          + `${gedeckelt.fenster} px)`);
+
+        /* AUFKLAPPEN ZEIGT ALLE -- wer nachsehen will, kann. */
+        await m5.s.click(".vorlagenbrett__antwort-kopf");
+        await m5.s.waitForTimeout(900);
+        const aufgeklappt = await m5.s.evaluate(() => {
+          const band = document.querySelector('.vorlagenbrett__antwort:not([data-alt])');
+          return {
+            zeilen: band ? band.querySelectorAll(".vorlagenbrett__antwort-zeile").length : 0,
+            knopf: band
+              ? (band.querySelector(".vorlagenbrett__antwort-kopf")?.innerText || "")
+                .replace(/\s+/g, " ").trim()
+              : "",
+          };
+        });
+        ok(aufgeklappt.zeilen > 3 && /Weniger/.test(aufgeklappt.knopf),
+          `aufgeklappt stehen alle da (${aufgeklappt.zeilen}, „${aufgeklappt.knopf}")`);
+
+        /* UND WIEDER ZU -- der Knopf geht in beide Richtungen. Ohne
+           diese Zeile koennte er ein Einwegschalter sein. */
+        await m5.s.click(".vorlagenbrett__antwort-kopf");
+        await m5.s.waitForTimeout(900);
+        ok(await m5.s.evaluate(() => document.querySelectorAll(
+          '.vorlagenbrett__antwort:not([data-alt]) .vorlagenbrett__antwort-zeile').length) === 3,
+        "und wieder zu — der Knopf geht in beide Richtungen");
+
+        /* DIE VIER PROBEZEILEN WIEDER WEG. Die Zeilen weiter unten
+           zaehlen „1 aeltere Antwort" und „2 aeltere Antworten" --
+           mit den Proben waeren es sechs, und sie wuerden rot, ohne
+           dass etwas kaputt ist. Eine Pruefung, die den Stand fuer
+           die naechste verschiebt, ist schlimmer als keine. */
+        {
+          const dx = new DatabaseSync(process.env.WORKSPACE_DB);
+          dx.prepare("DELETE FROM vorlagen_bewerbungen WHERE vorlage LIKE 'deckel-probe-%'")
+            .run();
+          dx.close();
+        }
+        await m5.s.reload({ waitUntil: "networkidle" });
+        await m5.s.waitForTimeout(1800);
+        ok(await m5.s.evaluate(() => document.querySelectorAll(
+          '.vorlagenbrett__antwort:not([data-alt]) .vorlagenbrett__antwort-zeile').length) === 2,
+        "und die Probezeilen sind wieder weg — der Stand ist wie vorher");
         ok(vorher.altKopf === null,
           `und es gibt noch keine aeltere Gruppe (${vorher.altKopf})`);