GUI: Tisch-Blase fix, Oeffnung wandert zum Sprecher

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0113vDKdSNtD3Dwcw4QMu9yV

app/web/src/main.js

@@ -599,13 +599,11 @@ async function openRecording(id) {
       const seats = tableSeats(Math.min(persons.length, spkOrder.length));
       const seat = seats[i >= 0 ? Math.min(i, persons.length - 1) : 0];
       if (bubble && seat) {
-        // Classic speech bubble AT the speaker: hang it between their mouth and
-        // the table centre, tail (arrow) pointing back at them.
-        const bx = seat.x + (50 - seat.x) * 0.52;
-        const by = seat.y + (50 - seat.y) * 0.60;
+        // The bubble sits FIXED on the table; only its tail (the "Öffnung")
+        // wanders to point at whoever is speaking.
         bubble.className = `tbubble ${scls[tu.sp] || ''} arrow-${seat.side}`;
-        bubble.style.left = bx + '%';
-        bubble.style.top = by + '%';
+        bubble.style.left = '';
+        bubble.style.top = '';
         bubble.querySelector('.tb-name').textContent = spkLabel(tu.sp, i >= 0 ? i : 0);
         // The full turn as clickable word spans — highlighted + scrolled below.
         bubble.querySelector('.tb-text').innerHTML =

app/web/src/style.css

@@ -296,11 +296,12 @@ audio { width: 100%; margin-bottom: 10px; }
 .tperson.talking .tname { color: var(--fg); font-weight: 650; }
 .tbubble {
   position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
-  width: 46%; z-index: 3;
-  background: var(--surface); border: 2px solid var(--line); border-radius: 12px;
+  width: 54%; z-index: 3;
+  background: var(--surface); border: 2px solid var(--line); border-radius: 14px;
   padding: 8px 10px; font-size: 13px; line-height: 1.55;
+  transition: border-color .2s;
 }
-.tb-scroll { max-height: 132px; overflow-y: auto; }
+.tb-scroll { max-height: 150px; overflow-y: auto; }
 .tbubble .tb-name { display: block; font-weight: 650; font-size: 11px; margin-bottom: 2px; position: sticky; top: 0; background: var(--surface); padding: 2px 0; z-index: 1; }
 .tbubble .bw { cursor: pointer; padding: 1px 2px; border-radius: 4px; }
 .tbubble .bw:hover { background: var(--surface-2); }

docs/08-changelog.md

@@ -3,6 +3,13 @@
 Chronik der Entwicklungsschritte. **Regel: jede zukünftige Änderung bekommt hier einen Eintrag** (Datum,
 Was, Warum, betroffene Dateien/Backups).
 
+## 2026-07-17 — GUI: Tisch-Blase fix, Oeffnung wandert zum Sprecher
+
+Feinschliff nach User-Feedback: Die Sprechblase liegt wieder FEST auf dem Tisch (54 % Breite),
+nur ihr Schwanz/die Oeffnung springt per arrow-Klasse zum jeweils Sprechenden; Rand-/Namensfarbe
+wechseln weich mit (border-color-Transition). Wort-Highlight, internes Mitscrollen und Klick-Seek
+bleiben. Bundle `index-CpZJOt3u.js`.
+
 ## 2026-07-17 — GUI: Sprechblase am Sprecher mit Wort-Highlight + Mitscrollen
 
 Tisch-Ansicht verfeinert: Die Blase haengt jetzt klassisch am MUND des Sprechers (dynamisch zwischen