Diagnoseseite: Text landete im Statuskreis statt daneben

Filipes Screenshot zeigte den Beschreibungstext als schmale
Buchstabensaeule ueber die halbe Seite laufen. Die Ursache ist eindeutig
und mein Fehler:

  d.innerHTML = '<span class="mark">✓</span><div><b></b><span></span></div>';
  d.querySelector("span").textContent = text;

querySelector liefert den ERSTEN passenden span -- und das war der
Statuskreis, nicht das Textfeld darunter. Der gesamte Beschreibungstext
wurde also in einen 26 Pixel breiten Kreis geschrieben und lief dort
heraus.

Zwei Regeln machten es schlimmer:
  .zeile span { ... }   traf ebenfalls BEIDE spans
  fehlendes min-width:0 verhinderte, dass die Textspalte schrumpfen darf

Jetzt wird die Zeile Element fuer Element aufgebaut, mit direkten
Verweisen statt Suche -- da gibt es nichts zu verwechseln. Die
CSS-Regeln zielen auf eigene Klassen (.inhalt, .text) statt auf den
Elementnamen, der Kreis ist auf feste 26px genagelt und schneidet
ueberzaehligen Inhalt ab, statt die Seite aufzubrechen.

Auch die feste Platzhalterzeile im HTML nutzte noch den alten Aufbau und
haette denselben Fehler gezeigt, sobald sie sichtbar wird.

GEPRUEFT im Browser: alle sechs Zeilen, jeder Kreis exakt 26x26, Text
danebenstehend. Zusaetzlich als Screenshot angesehen -- bei einem
Anzeigefehler ist Messen allein nicht genug, denn genau das hatte die
erste Fassung ja auch bestanden.

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

webdesign/diagnose.html

@@ -34,10 +34,22 @@ h2 { font-size: 1.05rem; margin: 1.8rem 0 .6rem; color: #7fd0e8; }
   border: 1px solid rgba(127,208,232,.16); border-radius: 10px;
   background: rgba(16,26,41,.5);
 }
+/* min-width:0 ist Pflicht, kein Feinschliff: Ohne das weigert sich ein
+   Flex-Kind, unter seine Inhaltsbreite zu schrumpfen, und langer Text
+   sprengt die Karte seitlich. */
+.zeile .inhalt { min-width: 0; flex: 1 1 auto; }
 .zeile b { display: block; margin-bottom: .1rem; }
-.zeile span { color: #8f9fb4; font-size: .9rem; word-break: break-word; }
-.mark { flex: none; width: 26px; height: 26px; border-radius: 50%;
-  display: grid; place-items: center; font-size: .95rem; line-height: 1; }
+/* Nur der Beschreibungstext, NICHT jeder span in der Zeile -- sonst
+   traefe die Regel auch den Statuskreis. */
+.zeile .text { color: #8f9fb4; font-size: .9rem; overflow-wrap: anywhere; }
+.mark {
+  flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%;
+  display: grid; place-items: center;
+  font-size: .95rem; line-height: 1;
+  /* Der Kreis enthaelt genau ein Zeichen. Sollte je mehr hineingeraten,
+     bricht es nicht die Seite auf, sondern wird abgeschnitten. */
+  overflow: hidden;
+}
 .gut  { background: rgba(111,214,163,.15); color: #6fd6a3; }
 .warn { background: rgba(232,200,119,.18); color: #e8c877; }
 .bad  { background: rgba(255,157,157,.15); color: #ff9d9d; }
@@ -69,7 +81,7 @@ code { background: rgba(127,208,232,.1); padding: .1rem .35rem; border-radius: 5
 
   <h2>Prüfungen</h2>
   <div id="ergebnis">
-    <div class="zeile"><span class="mark wart">…</span><div><b>Läuft</b><span>Einen Moment.</span></div></div>
+    <div class="zeile"><span class="mark wart" aria-hidden="true">…</span><div class="inhalt"><b>Prüfung läuft</b><span class="text">Einen Moment.</span></div></div>
   </div>
 
   <div class="knoepfe">
@@ -96,13 +108,43 @@ code { background: rgba(127,208,232,.1); padding: .1rem .35rem; border-radius: 5
   var API = "https://postfach.dogfather-universe.com";
   var ziel = document.getElementById("ergebnis");
 
+  /* Die Zeile wird Element fuer Element gebaut, NICHT ueber innerHTML mit
+     anschliessendem querySelector.
+
+     Genau daran ist die erste Fassung gescheitert: Sie schrieb
+     d.querySelector("span").textContent = text -- und querySelector
+     liefert den ERSTEN passenden span. Das war der Statuskreis, nicht das
+     Textfeld darunter. Der ganze Beschreibungstext landete dadurch in
+     einem 26 Pixel breiten Kreis und lief als schmale Buchstabensaeule
+     ueber die halbe Seite.
+
+     Mit direkten Verweisen auf die erzeugten Elemente kann das nicht
+     passieren -- es gibt nichts zu verwechseln. */
   function zeile(art, titel, text) {
-    var z = { gut: "✓", warn: "!", bad: "✕", wart: "…" };
+    var zeichen = { gut: "✓", warn: "!", bad: "✕", wart: "…" };
+
     var d = document.createElement("div");
     d.className = "zeile";
-    d.innerHTML = '<span class="mark ' + art + '">' + z[art] + "</span><div><b></b><span></span></div>";
-    d.querySelector("b").textContent = titel;
-    d.querySelector("span").textContent = text;
+
+    var kreis = document.createElement("span");
+    kreis.className = "mark " + art;
+    kreis.textContent = zeichen[art] || "?";
+    kreis.setAttribute("aria-hidden", "true");
+
+    var inhalt = document.createElement("div");
+    inhalt.className = "inhalt";
+
+    var ueberschrift = document.createElement("b");
+    ueberschrift.textContent = titel;
+
+    var beschreibung = document.createElement("span");
+    beschreibung.className = "text";
+    beschreibung.textContent = text;
+
+    inhalt.appendChild(ueberschrift);
+    inhalt.appendChild(beschreibung);
+    d.appendChild(kreis);
+    d.appendChild(inhalt);
     ziel.appendChild(d);
   }