Tonio
3b9f36403e
## Thinking Path > - Paperclip is the open source app people use to manage AI agents for work > - The web UI renders work items in a task/issue list and board columns, each row leading with a status circle next to the title text > - The status-circle wrapper `<span>` was not enforcing cross-axis centering, so the circle aligned to the top of taller rows instead of the title > - This looked broken: the circle floated above the text rather than sitting centered against it, across statuses > - This pull request adds flex centering (`inline-flex` + `items-center`) to the status-icon wrapper spans so the circle is vertically centered with the title in every row > - The benefit is a consistent, correctly aligned task list regardless of task status or row height ## Linked Issues or Issue Description No public GitHub issue exists; describing inline following the bug report template. ### What happened? In the task/issue list and board, the leading status circle was not vertically centered with the task title text. On taller rows the circle sat near the top instead of aligned with the title, so the list looked misaligned across all statuses. ### Expected behavior The status circle should be vertically centered with the title string in every task row, regardless of status. ### Steps to reproduce 1. Open the task list (or board) view in the web UI. 2. Observe rows in different statuses, especially taller rows. 3. Notice the status circle is top-aligned rather than vertically centered with the title text. ### Paperclip version or commit `master` @ 411a9a51 (branch base for this PR). ### Deployment mode Local dev (pnpm dev). ## What Changed - `ui/src/components/IssueColumns.tsx`: added `items-center` to the leading status-icon wrapper span (`inline-flex` container) in `InboxIssueMetaLeading`. - `ui/src/components/IssuesList.tsx`: added `inline-flex items-center` to the two status-icon wrapper spans so the circle centers with the row text (matching the `IssueColumns.tsx` change). ## Verification - Manual: open the task list and board views; confirm the status circle is vertically centered with the title across statuses and on taller rows. - Before/after matches the screenshots from the originating request (broken: circle top-aligned; fixed: circle centered). - `cd ui && npx tsc --noEmit` — type check passes for the touched components. ## Risks - Low risk. CSS-only change to wrapper spans; no logic, data, or API changes. Limited to status-icon alignment in the task list/board rows. ## Model Used - Claude Opus 4.6 (`claude-opus-4-6`), extended thinking + tool use, via Claude Code. ## 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 and contains no internal Paperclip ticket id or instance-derived details - [x] I have run tests locally and they pass - [ ] I have added or updated tests where applicable (CSS-only alignment change; no meaningful unit test — retitled `refactor:` per contribution gate) - [x] If this change affects the UI, I have included before/after screenshots - [x] I have updated relevant documentation to reflect my changes (none required) - [x] I have considered and documented any risks above - [x] All Paperclip CI gates are green - [ ] Greptile is 5/5 with no open P2s, recommendations, or follow-ups - [x] I will address all Greptile and reviewer comments before requesting merge --------- Co-authored-by: Paperclip <noreply@paperclip.ing>
@paperclipai/ui
Published static assets for the Paperclip board UI.
What gets published
The npm package contains the production build under dist/. It does not ship the UI source tree or workspace-only dependencies.
Storybook
Storybook config, stories, and fixtures live under ui/storybook/.
pnpm --filter @paperclipai/ui storybook
pnpm --filter @paperclipai/ui build-storybook
Typical use
Install the package, then serve or copy the built files from node_modules/@paperclipai/ui/dist.