vinzenz/hyperhive
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

agent: loose-ends flyout body on its own row (#376)

Browse source 
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.
This commit is contained in:
iris 2026-05-24 13:18:29 +02:00 • committed by Mara
parent 5615da9211
commit d4bb3e4aa0
1 changed files with 22 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

32
frontend/packages/agent/src/agent.css
View file

@ -322,17 +322,26 @@ pre.diff {
max-height: 16em; max-height: 16em;
overflow-y: auto; 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 { .agent-inbox li {
padding: 0.15em 0; padding: 0.4em 0;
display: grid; display: block;
grid-template-columns: auto auto auto 1fr;
gap: 0.5em;
align-items: baseline;
} }
.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-from { color: var(--amber); }
.agent-inbox .inbox-sep { color: var(--muted); } .agent-inbox .inbox-sep { color: var(--muted); margin-left: 0.4em; }
.agent-inbox .inbox-body { color: var(--fg); white-space: pre-wrap; word-break: break-word; } .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 { .agent-inbox li.inbox-reply {
padding-left: 1em; padding-left: 1em;
border-left: 2px solid var(--border); 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 .inbox-reply-tag { color: var(--muted); font-size: 0.85em; }
.agent-inbox .answer-form { .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; display: flex;
gap: 0.4em; gap: 0.4em;
align-items: flex-start; align-items: flex-start;
margin-top: 0.25em; margin-top: 0.5em;
padding-left: 0.8em;
} }
.agent-inbox .answer-form textarea { .agent-inbox .answer-form textarea {
flex: 1; flex: 1;