What
In the inbox list, a conversation with status pending renders its badge as an absolutely-positioned overlay on top of the row rather than as a real cell:
// web/src/components/InboxScreen.tsx
{c.status === 'pending' && (
<span style={{ position: 'absolute', right: 24, top: 6 }}>
<StatusPill status="pending" style={{ fontSize: 9.5, padding: '1px 7px' }} />
</span>
)}Because it is an overlay pinned to top: 6, it shares screen space with the waiting-since cell directly beneath it. Measured in the running app at 1280px with a seeded conversation set to pending:
| Element |
Top |
Bottom |
| Pending badge |
106 |
127 |
| Waiting-since cell |
118 |
139 |
They overlap by ~9px vertically, and horizontally they sit in the same band. Nothing is currently illegible, but the two elements are stacked by luck of their sizes, not by layout.
Why it matters
Any change to row height, font size, or the waiting-since value's width can turn the near-miss into a visible collision. It also means the badge is invisible to the flex layout, so the row cannot reserve space for it.
Suggested fix
Give the pending badge a reserved slot in the row's right-hand flex group — the same way count already has one — instead of overlaying it. That most likely means a prop on ConversationRow rather than an overlay in InboxScreen, which makes it a design-system change: web/src/components/ds/inbox/ConversationRow.jsx is a verbatim copy of the design project's component, so the change has to reconcile both directions per CLAUDE.md.
Provenance
Not a regression. The overlay predates PR #163 — CodeRabbit flagged the badge area while reviewing that PR, and investigating it turned up one real regression (the badge was left at the old 14px gutter, fixed in #163) plus this pre-existing structural issue, which was left alone as out of scope.
Reported at the maintainer's request, 2026-07-25.
What
In the inbox list, a conversation with status
pendingrenders its badge as an absolutely-positioned overlay on top of the row rather than as a real cell:Because it is an overlay pinned to
top: 6, it shares screen space with the waiting-since cell directly beneath it. Measured in the running app at 1280px with a seeded conversation set to pending:They overlap by ~9px vertically, and horizontally they sit in the same band. Nothing is currently illegible, but the two elements are stacked by luck of their sizes, not by layout.
Why it matters
Any change to row height, font size, or the waiting-since value's width can turn the near-miss into a visible collision. It also means the badge is invisible to the flex layout, so the row cannot reserve space for it.
Suggested fix
Give the pending badge a reserved slot in the row's right-hand flex group — the same way
countalready has one — instead of overlaying it. That most likely means a prop onConversationRowrather than an overlay inInboxScreen, which makes it a design-system change:web/src/components/ds/inbox/ConversationRow.jsxis a verbatim copy of the design project's component, so the change has to reconcile both directions perCLAUDE.md.Provenance
Not a regression. The overlay predates PR #163 — CodeRabbit flagged the badge area while reviewing that PR, and investigating it turned up one real regression (the badge was left at the old 14px gutter, fixed in #163) plus this pre-existing structural issue, which was left alone as out of scope.
Reported at the maintainer's request, 2026-07-25.