From d4bb3e4aa0027c6e0573543592e94bc394f9400b Mon Sep 17 00:00:00 2001
From: iris <iris@hyperhive>
Date: Sun, 24 May 2026 13:18:29 +0200
Subject: [PATCH] agent: loose-ends flyout body on its own row (#376)

Operator: the per-entry header (from/sep/ts) + body were on the same
grid row, with the body squeezed into a 1fr column. In the side-
panel flyout's ~640px width, after the auto header columns ate
their share, the body wrapped over many narrow lines.

Fix: `.agent-inbox li` switches from `display: grid` to
`display: block`. The body element (currently a `<div>` for
loose-ends and a `<span>` for inbox messages) gets explicit
`display: block` so it always breaks to a new line under the
header. Light `padding-left + border-left` indent on the body
gives a visual relationship to the header row above without
needing a column structure.

`inbox-ts` + `inbox-sep` pick up small left margins to preserve
the inline spacing the grid's `gap: 0.5em` used to provide.

`.answer-form` drops its no-longer-applicable `grid-column: 1 / -1`
(replaced with a regular block layout + matching padding-left so
the form aligns with the question body it answers).

## Validation

`npm run build` clean. Bundle deltas: agent.css unchanged in
bundled size (rules swapped 1:1).

Browser smoke test isn't possible from inside iris's container.
Worth eyeballing post-deploy:
  - Loose-ends entries with long question/description bodies wrap
    to the panel width rather than getting clipped into a narrow
    fourth column.
  - The header line stays compact and readable.
  - Answer-form for a question loose-end still aligns visually
    under the question body it answers.

Closes #376.
---
 frontend/packages/agent/src/agent.css | 32 ++++++++++++++++++---------
 1 file changed, 22 insertions(+), 10 deletions(-)

diff --git a/frontend/packages/agent/src/agent.css b/frontend/packages/agent/src/agent.css
index 64ed0fc..72318bb 100644
--- a/frontend/packages/agent/src/agent.css
+++ b/frontend/packages/agent/src/agent.css
@@ -322,17 +322,26 @@ pre.diff {
   max-height: 16em;
   overflow-y: auto;
 }
+/* Inbox / loose-ends rows: header (from / sep / ts) on one line,
+   body on its own line below — gives the body the full panel width
+   instead of squeezing it into a fourth grid column that wrapped
+   long messages over many narrow lines (issue #376). */
 .agent-inbox li {
-  padding: 0.15em 0;
-  display: grid;
-  grid-template-columns: auto auto auto 1fr;
-  gap: 0.5em;
-  align-items: baseline;
+  padding: 0.4em 0;
+  display: block;
 }
-.agent-inbox .inbox-ts   { color: var(--muted); font-size: 0.9em; }
+.agent-inbox .inbox-ts   { color: var(--muted); font-size: 0.9em; margin-left: 0.5em; }
 .agent-inbox .inbox-from { color: var(--amber); }
-.agent-inbox .inbox-sep  { color: var(--muted); }
-.agent-inbox .inbox-body { color: var(--fg); white-space: pre-wrap; word-break: break-word; }
+.agent-inbox .inbox-sep  { color: var(--muted); margin-left: 0.4em; }
+.agent-inbox .inbox-body {
+  display: block;
+  color: var(--fg);
+  white-space: pre-wrap;
+  word-break: break-word;
+  margin-top: 0.3em;
+  padding-left: 0.8em;
+  border-left: 2px solid var(--purple-dim);
+}
 .agent-inbox li.inbox-reply {
   padding-left: 1em;
   border-left: 2px solid var(--border);
@@ -341,11 +350,14 @@ pre.diff {
 .agent-inbox .inbox-reply-tag { color: var(--muted); font-size: 0.85em; }
 
 .agent-inbox .answer-form {
-  grid-column: 1 / -1;
+  /* Block-level under the new layout — `grid-column: 1 / -1` was
+     for the legacy grid; under block layout the form naturally
+     starts on its own row. */
   display: flex;
   gap: 0.4em;
   align-items: flex-start;
-  margin-top: 0.25em;
+  margin-top: 0.5em;
+  padding-left: 0.8em;
 }
 .agent-inbox .answer-form textarea {
   flex: 1;