From 2ad5a948978405ae389a09494a709e80c639c582 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?m=C3=BCde?= Date: Sun, 17 May 2026 23:20:29 +0200 Subject: [PATCH] =?UTF-8?q?dashboard:=20msgrow=20flex=20layout=20=E2=80=94?= =?UTF-8?q?=20fix=20per-char=20wrap=20when=20paths=20linkify?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- hive-c0re/assets/dashboard.css | 29 ++++++++++++++++++++++++++++- 1 file changed, 28 insertions(+), 1 deletion(-) diff --git a/hive-c0re/assets/dashboard.css b/hive-c0re/assets/dashboard.css index 2f439bb..b1ffe7f 100644 --- a/hive-c0re/assets/dashboard.css +++ b/hive-c0re/assets/dashboard.css @@ -631,7 +631,34 @@ summary:hover { color: var(--purple); } hive-fr0nt::TERMINAL_CSS). The msgrow / msg-* rules below are dashboard-specific: each broker event becomes a grid of timestamp + arrow + from/sep/to + body inside the `.row` shell. */ -.live .msgrow { display: grid; grid-template-columns: auto auto auto auto auto 1fr; gap: 0.6em; align-items: baseline; padding: 0.1em 0; } +/* Flex (not grid): the row carries the header chips (ts / arrow / + from / → / to / body) inline, and may also carry one or more + `
` path-preview siblings appended by appendLinkified. + Grid would treat each preview as an extra grid item in a fixed + column template, distorting the header column widths. Flex + collapses whitespace-only text nodes between items, gives `body` + the remaining width via `flex: 1`, and lets each preview claim a + full-width row of its own via `flex-basis: 100%`. */ +.live .msgrow { + display: flex; + flex-wrap: wrap; + align-items: baseline; + gap: 0.5em; + padding: 0.1em 0; +} +.live .msgrow .msg-body { + flex: 1 1 0; + /* min-width: 0 lets the body shrink below its longest token so + `word-break: break-word` actually kicks in instead of forcing + the whole flex line wider than the container. */ + min-width: 0; +} +.live .msgrow > .path-preview { + flex: 1 0 100%; + /* line up with the message body — no left chrome inherited from + the global .path-preview indent. */ + margin-left: 0; +} .live .msgrow.sent .msg-arrow { color: var(--cyan); } .live .msgrow.delivered .msg-arrow { color: var(--green); } .msg-ts { color: var(--muted); font-size: 0.85em; }