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); }