diff --git a/server/pruef-chat-aufloesen.mjs b/server/pruef-chat-aufloesen.mjs
index 2dc70d6a..d809ac1d 100644
--- a/server/pruef-chat-aufloesen.mjs
+++ b/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") });
diff --git a/workspace/app.webmanifest b/workspace/app.webmanifest
index 93581974..22b3c758 100644
--- a/workspace/app.webmanifest
+++ b/workspace/app.webmanifest
@@ -13,25 +13,25 @@
"theme_color": "#06090f",
"icons": [
{
- "src": "/assets/img/app-symbole/workspace-192.png?v=202609151721",
+ "src": "/assets/img/app-symbole/workspace-192.png?v=202609151730",
"sizes": "192x192",
"type": "image/png",
"purpose": "any"
},
{
- "src": "/assets/img/app-symbole/workspace-512.png?v=202609151721",
+ "src": "/assets/img/app-symbole/workspace-512.png?v=202609151730",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
},
{
- "src": "/assets/img/app-symbole/workspace-192-maskable.png?v=202609151721",
+ "src": "/assets/img/app-symbole/workspace-192-maskable.png?v=202609151730",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable"
},
{
- "src": "/assets/img/app-symbole/workspace-512-maskable.png?v=202609151721",
+ "src": "/assets/img/app-symbole/workspace-512-maskable.png?v=202609151730",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
diff --git a/workspace/assets/css/chat.css b/workspace/assets/css/chat.css
index f4b5a9c4..9caca9af 100644
--- a/workspace/assets/css/chat.css
+++ b/workspace/assets/css/chat.css
@@ -1029,6 +1029,24 @@
bunten Punkte sind. */
.reagieren-tafel {
position: relative; z-index: 5;
+ /* SIE MUSS SAGEN, IN WELCHE SPALTE SIE GEHOERT (15.09.2026).
+
+ Filipe, mit einem Bildschirmfoto: "was ist das den fuer eine
+ scheisse verbesser das sofort." Darauf ein dreissig Pixel schmaler
+ Streifen mit sechs Zeichen untereinander.
+
+ .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. Die Tafel
+ bekam damit dreissig Pixel, `width: min(330px, 100%)` machte
+ brav 30 daraus, und die Zeichen stapelten sich.
+
+ BEI EIGENEN NACHRICHTEN FIEL ES NIE AUF: Dort hat das Raster nur
+ EINE Spalte (der Kreis entfaellt), die Tafel bekam die volle
+ Breite. Und genau diesen Fall hat die Pruefung gemessen -- sie war
+ gruen, waehrend es bei jeder fremden Nachricht kaputt war. */
+ grid-column: 2; justify-self: start;
margin: 8px 0 2px;
width: min(330px, 100%);
border: 1px solid var(--rand-hell, var(--rand));
@@ -1048,6 +1066,11 @@
@media (prefers-reduced-motion: reduce) {
.reagieren-tafel { animation: none; }
}
+/* Die eigene Nachricht hat nur eine Spalte -- dort waere `2` eine
+ Spalte, die es nicht gibt, und das Raster legte still eine an. */
+.chat-nachricht[data-selbst="ja"] .reagieren-tafel {
+ grid-column: 1; justify-self: end;
+}
/* Kopf: die Vorschlaege nehmen den Platz, der Stern bleibt rechts. */
.reagieren-tafel__kopf {
diff --git a/workspace/aufgaben.html b/workspace/aufgaben.html
index 5e7ba09d..7795b6e0 100644
--- a/workspace/aufgaben.html
+++ b/workspace/aufgaben.html
@@ -12,19 +12,19 @@
Ton wie die Kopfleiste darunter (#06090f), damit Leiste und Seite
eine Flaeche sind statt zweier. -->
-
-
-
-
-
-
+
+
+
+
+
+
-
+
@@ -282,10 +282,10 @@
-
-
-
-
-
+
+
+
+
+