Die Reaktionstafel landete in der Spalte des Namenskreises

Filipe, mit einem Bildschirmfoto: "was ist das den fuer eine scheisse
verbesser das sofort." Darauf ein dreissig Pixel schmaler Streifen,
sechs Zeichen untereinander, ein Rollbalken daneben.

.chat-nachricht ist ein RASTER aus zwei Spalten: dreissig Pixel fuer
den Kreis mit den Initialen, der Rest fuer die Blase. Ein Kind ohne
Spaltenangabe wird automatisch in die naechste freie Zelle gesetzt --
und das ist die Spalte des Kreises. `width: min(330px, 100%)` machte
daraus brav 30 Pixel, und die Zeichen stapelten sich.

UND WARUM ES NIEMANDEM AUFGEFALLEN IST: Bei der EIGENEN Nachricht
entfaellt der Kreis, das Raster hat dann nur eine Spalte, die Tafel
bekam die volle Breite. Die Pruefung vom 14.09. hat genau diesen Fall
gemessen -- nachgemessen heute: selbst=ja, eine Spalte, 611 px. Sie
war gruen, waehrend es bei JEDER fremden Nachricht kaputt war.

Und sie hat ausserdem nur Anwesenheit geprueft ("gibt es die
Elemente", "sucht die Suche") -- nie Geometrie. Eine dreissig Pixel
breite Tafel besteht jede dieser Zeilen.

Jetzt gemessen, und zwar in BEIDEN Faellen: Breite, ob die sechs
Vorschlaege auf EINER Zeile stehen, und ob die Tafel neben dem Kreis
steht statt darunter. Dafuer schreibt der Testraum jetzt auch eine
Nachricht von jemand anderem -- ohne die gab es dort nur eigene.

GEGENPROBE (Reparatur kurz entfernt, gemessen, wieder eingesetzt):

  ohne  30 px, 6 Zeilen, +0 px   <- genau das Bildschirmfoto
  mit   330 px, 1 Zeile, +39 px

  server/pruef-chat-aufloesen.mjs   125 Pruefungen (vorher 119)
  pruef-chat-optik, pruef-chat, pruef-css-klassen -- alle in Ordnung

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

server/pruef-chat-aufloesen.mjs

@@ -679,6 +679,14 @@ console.log("=== Das Neu-Fenster ===");
     { mit: [idEins], name: "Reagieren sichtbar" }, "POST")).json();
   await rufe(hand.keks, `/workspace/api/chat/raeume/${rRaum.raum_id}/nachrichten`,
     { text: "Reagier mal drauf" }, "POST");
+  /* UND EINE VON JEMAND ANDEREM. Ohne sie gibt es in diesem Raum nur
+     eigene Nachrichten -- und genau daran ist die Prüfung am 15.09.
+     vorbeigelaufen: Bei einer eigenen Nachricht hat das Raster nur eine
+     Spalte, die Tafel bekam die volle Breite, alles war grün. Kaputt
+     war es bei jeder FREMDEN, wo der Kreis mit den Initialen eine
+     30-px-Spalte aufmacht. */
+  await rufe(eins.keks, `/workspace/api/chat/raeume/${rRaum.raum_id}/nachrichten`,
+    { text: "Und hier steht was von Ayla" }, "POST");
   await seite.goto(BASIS + `/workspace/chat.html?raum=${rRaum.raum_id}`,
     { waitUntil: "networkidle" });
   await seite.waitForTimeout(1500);
@@ -711,6 +719,90 @@ console.log("=== Das Neu-Fenster ===");
     `darunter der Katalog: ${teile.gruppen} Gruppen, ${teile.katalog} Zeichen`);
   ok(teile.suche && teile.stern, "Suchfeld und Favoriten-Schalter sind da");
 
+  /* ===== UND SIE MUSS AUCH AUSSEHEN WIE EINE TAFEL (15.09.2026) ======
+
+     Filipe, mit einem Bildschirmfoto: „was ist das den für eine
+     scheisse verbesser das sofort." Darauf: ein dreissig Pixel
+     schmaler Streifen, sechs Zeichen untereinander, ein Rollbalken
+     daneben.
+
+     ALLE PRÜFUNGEN OBEN WAREN DABEI GRÜN. Sie fragen, ob es die
+     Elemente gibt und ob die Suche sucht -- beides stimmte. Wie breit
+     die Tafel ist, hat nie jemand gemessen. Genau die Sorte Prüfung,
+     die bestätigt und nichts beweist.
+
+     Gemessen wird deshalb die GEOMETRIE: Ist sie so breit, wie eine
+     Karte sein muss? Und stehen die sechs Vorschläge NEBENeinander --
+     also auf derselben Höhe? */
+  const masse = await seite.evaluate(() => {
+    const t = document.querySelector(".reagieren-tafel");
+    if (!t) return null;
+    const k = t.getBoundingClientRect();
+    const z = [...document.querySelectorAll(
+      ".reagieren-tafel__schnell .reagieren-tafel__zeichen")].map((x) => Math.round(
+      x.getBoundingClientRect().top));
+    const n = t.closest(".chat-nachricht");
+    return { breite: Math.round(k.width), hoehe: Math.round(k.height),
+      reihen: new Set(z).size, zeichen: z.length,
+      selbst: n?.dataset.selbst || "nein",
+      spalten: n ? getComputedStyle(n).gridTemplateColumns : "",
+      zelle: getComputedStyle(t).gridColumnStart };
+  });
+  ok(!!masse, "die Tafel liegt im Bild");
+  ok(masse.selbst === "ja", "hier haengt sie an einer EIGENEN Nachricht");
+  ok(masse.breite >= 280,
+    `sie ist eine Karte, kein Streifen (${masse.breite} px breit)`);
+  /* Sechs Zeichen auf EINER Zeile. Zwei Zeilen wären kein Fehler --
+     dreissig Pixel Breite sind einer, und dort stünden sechs. */
+  ok(masse.reihen === 1,
+    `die ${masse.zeichen} Vorschläge stehen nebeneinander (${masse.reihen} Zeile)`);
+  ok(masse.hoehe < masse.breite * 1.6,
+    `und sie ist breiter als hoch (${masse.breite} x ${masse.hoehe} px)`);
+
+  /* ===== UND JETZT DER FALL, DER WIRKLICH KAPUTT WAR ==================
+
+     Alles oben wurde an einer EIGENEN Nachricht gemessen. Dort hat das
+     Raster nur eine Spalte, und die Tafel bekam die volle Breite --
+     deshalb war diese Prüfung gruen, waehrend es bei jeder FREMDEN
+     Nachricht dreissig Pixel waren.
+
+     Eine Prüfung, die nur den Fall misst, in dem es ohnehin
+     funktioniert, ist keine Prüfung. */
+  await seite.evaluate(() => document.querySelector(".reagieren-tafel")?.remove());
+  const fremdeDa = await seite.evaluate(() => {
+    const n = [...document.querySelectorAll('.chat-nachricht:not([data-selbst="ja"])')]
+      .find((x) => x.querySelector(".chat-nachricht__reag-knopf"));
+    if (!n) return false;
+    n.querySelector(".chat-nachricht__reag-knopf").click();
+    return true;
+  });
+  /* KEIN ÜBERSPRINGEN: Findet sich keine fremde Nachricht, ist die
+     Prüfung nicht durchführbar -- und das ist ein Fehler, kein
+     stilles Weiterlaufen. */
+  ok(fremdeDa, "es gibt eine Nachricht von jemand anderem zum Messen");
+  await seite.waitForTimeout(500);
+  const fremdeTafel = await seite.evaluate(() => {
+    const t = document.querySelector(".reagieren-tafel");
+    if (!t) return null;
+    const k = t.getBoundingClientRect();
+    const z = [...document.querySelectorAll(
+      ".reagieren-tafel__schnell .reagieren-tafel__zeichen")].map((x) => Math.round(
+      x.getBoundingClientRect().top));
+    const n = t.closest(".chat-nachricht");
+    const kreis = n?.querySelector(".chat-nachricht__zeichen")?.getBoundingClientRect();
+    return { breite: Math.round(k.width), reihen: new Set(z).size,
+      selbst: n?.dataset.selbst || "nein",
+      /* Steht sie NEBEN dem Kreis oder darunter in seiner Spalte? */
+      nebenDemKreis: kreis ? Math.round(k.left - kreis.left) : null };
+  });
+  ok(fremdeTafel?.selbst === "nein", "die Tafel haengt jetzt an einer fremden Nachricht");
+  ok(fremdeTafel.breite >= 280,
+    `auch dort ist sie eine Karte (${fremdeTafel.breite} px statt der 30 von vorher)`);
+  ok(fremdeTafel.reihen === 1,
+    `und die Vorschlaege stehen nebeneinander (${fremdeTafel.reihen} Zeile)`);
+  ok(fremdeTafel.nebenDemKreis >= 30,
+    `sie steht in der Spalte der Blase, nicht in der des Kreises (+${fremdeTafel.nebenDemKreis} px)`);
+
   if (process.env.SCHIRM) {
     await seite.locator(".chat-nachricht").last().screenshot(
       { path: join(HIER_BILD, "pruef-chat-tafel.png") });