From 501a86b725cdcdf23b7fd6b1d61f70a23f7588db Mon Sep 17 00:00:00 2001
From: iris <iris@hyperhive>
Date: Tue, 26 May 2026 19:16:50 +0200
Subject: [PATCH] flow: body to its own full-width line under the meta chips
 (closes #485)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

mara: "the 'timestamp from -> to' part is long enough to warrant
its own line. then the actual messages can be rendered (nearly)
full width."

Confirmed in the layout — previously `.live .msgrow .msg-body`
sat inline with `flex: 1 1 0`, eating whatever the chips left.
With a 14:23:42 timestamp + agent names + arrows that was ~30ch
of prefix; long bodies wrapped awkwardly.

One-line CSS fix: `flex: 1 1 100%` on `.msg-body` forces it to
wrap to its own flex line in the existing `flex-wrap: wrap`
container. Metadata chips stay on the row above; body takes the
full width down to the row's content edge.

`min-width: 0` retained so `word-break: break-word` keeps
working. Reply rows keep their `padding-left: 1.2em` border-left
indent — the body lands within that frame, matching the visual
"this is a reply" nesting.

Out of scope but worth knowing:
- consecutive-message grouping (one header per agent run) was
  the second design option I floated; happy to land it as a
  follow-up if reading still feels chatty.
- timestamp-on-hover was the third; skipping unless asked.
---
 frontend/packages/dashboard/src/dashboard.css | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/frontend/packages/dashboard/src/dashboard.css b/frontend/packages/dashboard/src/dashboard.css
index 1c00ae6c..c7b53f9d 100644
--- a/frontend/packages/dashboard/src/dashboard.css
+++ b/frontend/packages/dashboard/src/dashboard.css
@@ -1164,10 +1164,18 @@ summary:hover { color: var(--purple); }
   text-indent: 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. */
+  /* #485: body takes a full flex line of its own beneath the
+     metadata chips (ts / arrow / from / sep / to). Previously the
+     body sat inline with `flex: 1 1 0`, eating whatever the chips
+     left — which on a long timestamp + agent names + arrows meant
+     the body started ~30ch in and wrapped awkwardly. Pushing
+     `flex-basis: 100%` forces the body to wrap to its own line in
+     the existing `flex-wrap: wrap` row, where it can use the full
+     width down to the row's content edge.
+     `min-width: 0` still applies so `word-break: break-word`
+     actually kicks in instead of forcing the row wider than its
+     container. */
+  flex: 1 1 100%;
   min-width: 0;
 }
 .live .msgrow.sent .msg-arrow { color: var(--cyan); }