fix(ui): stop the inbox unread dot from indenting rows (#9767)
## Thinking Path > - Paperclip is the open source app people use to manage AI agents for work > - The Inbox lists issues as rows; unread rows show a small blue mark-read dot at the leading edge > - The dot was rendered as an `order-first` flex column that existed only on unread rows, so it changed each row's leading layout depending on read state > - On parent (chevron) rows the dot stacked on top of the collapse chevron and pushed the whole row's status/title to the right, so unread rows sat indented relative to their read siblings > - This PR gives every inbox row a reserved leftmost dot slot so the dot never changes horizontal alignment > - The benefit is a stable, non-shifting inbox: read and unread rows line up at the same x, and the dot no longer crowds the collapse caret ## Linked Issues or Issue Description No public issue exists. Describing as a bug report: - **What happened:** In the Inbox, an unread issue row's blue mark-read dot pushed the row's status/title to the right, so unread rows were indented relative to read siblings. On parent (collapsible) rows the dot also overlapped the collapse chevron. - **Expected behavior:** The unread dot should not change a row's horizontal alignment. Read and unread rows should line up identically, and the dot should sit clear of the collapse caret. - **Steps to reproduce:** Open the Inbox with a mix of read/unread issues, including a parent issue with children. Observe unread rows indented vs. read rows, and the dot crowding the chevron on parent rows. - **Deployment mode:** UI-only (frontend). Related PR (same inbox area, in flight): https://github.com/paperclipai/paperclip/pull/9685 ## What Changed - `ui/src/components/IssueRow.tsx`: Add a reserved leftmost dot slot (`w-4`, desktop) that is present on **all** inbox rows — read and unread alike — so the mark-read dot renders far-left ahead of any leading control without shifting content. The dot button markup is now shared between the desktop reserved slot and the mobile in-flow rendering. The row is `relative` for slot positioning. - `ui/src/pages/Inbox.tsx`: Always reserve the leading spacer for non-chevron rows (removed the special-case that dropped it for unread rows), since the dot now has its own dedicated slot to the left of the spacer. This removes the double-indent. - Mobile keeps the dot in flow as the leading item (no reserved desktop gutter there). - Tests: `IssueRow.test.tsx` and `Inbox.test.tsx` updated to assert the reserved dot slot exists on read and unread rows and that alignment no longer differs by read state. ## Verification - `cd ui && NODE_ENV=development npx vitest run src/components/IssueRow.test.tsx src/pages/Inbox.test.tsx` → 28 tests pass. - `cd ui && npm run typecheck` → clean. - Note: running the full UI suite with `NODE_ENV=production` surfaces pre-existing `act is not a function` failures unrelated to this change (React's production bundle strips `act`); they pass under a normal test env. ## Risks Low risk. UI-only, scoped to inbox row layout. The reserved slot is `hidden ... sm:inline-flex`, so mobile layout is unchanged (dot stays in flow). No API, schema, or telemetry changes. ## Model Used Claude Opus 4.8 (claude-opus-4-8), 1M context window, extended thinking + tool use. ## Checklist - [x] I have included a thinking path that traces from project context to this change - [x] I have specified the model used (with version and capability details) - [x] I have checked ROADMAP.md and confirmed this PR does not duplicate planned core work - [x] I have searched GitHub for duplicate or related PRs and linked them above - [x] I have either (a) linked existing issues with `Fixes: #` / `Closes #` / `Refs #` OR (b) described the issue in-PR following the relevant issue template - [x] I have not referenced internal/instance-local Paperclip issues or links (only public GitHub `#NNN` / `github.com/paperclipai/paperclip` URLs) - [x] My branch name describes the change (e.g. `docs/...`, `fix/...`) and contains no internal Paperclip ticket id or instance-derived details - [x] I have run tests locally and they pass - [x] I have added or updated tests where applicable - [ ] I have updated relevant documentation to reflect my changes (no docs affected) - [x] I have considered and documented any risks above - [ ] All Paperclip CI gates are green (pending CI) - [ ] Greptile is 5/5 with no open P2s, recommendations, or follow-ups (pending review) - [x] I will address all Greptile and reviewer comments before requesting merge Co-authored-by: Paperclip <noreply@paperclip.ing>
This commit is contained in:
Dotta
GitHub
parent
a090c09ee5
commit
f7e511a3e5