Own-message bubble hugs content; consecutive runs form clean rectangles

[mremond]

The filled own-message tint spanned the full row. It now hugs its content, so a short message reads as a small pill (stopping around where the you · time header ends) instead of a full-width band. Long messages still wrap at the available width; incoming rows and whisper cards are unchanged.

A run of consecutive own messages shares the widest line's width so the tint reads as one clean rectangle rather than a ragged per-row hug. The timeline is virtualized with flat, independent rows (no per-group DOM container), so there is no CSS-only path — this uses a small imperative width registry (messageGroupWidth.tsx):

• widths are applied via el.style.width (never React state, so no measure→render loop);
• all dirty groups flush in one microtask, reads-before-writes (single layout pass, before paint — no flicker);
• only the background box widens (text stays w-fit), so row heights never change and the virtualizer/scroll anchoring are untouched;
• only multi-row own runs register — a solo own message stays pure CSS w-fit;
• max-w-full is the safety net: a stale pinned width can never overflow, the group stays rectangular at the available width.

Re-fit triggers: mount, content change (via a width signature), and container resize (reusing the same debounced signal CollapsibleContent already uses).