fix(web): center the icon in thread details panel icon chips

[abderbejaoui]

Problem

The Lineage "More thread actions" button in the thread details panel shows its hover background offset from the three-dot icon: about 3px of fill before the dots and about 12px after. The button is a ThreadDetailsControl with part="icon". In the panel path, size and variant never reach Button, whose base class includes justify-center; instead the control uses THREAD_DETAILS_PANEL_ICON_ACTION_CLASS (size-6, p-0) on top of the shared panel control classes, which are inline-flex items-center without justify-center. The size-3.5 icon therefore stays at the start of the 24px box while the hover fill covers the whole box. The Automations manage, edit and run buttons use the same class and are offset the same way.

Reported in #15306 with a screenshot; confirmed by triage on main, which traced the class path and named centering the content in THREAD_DETAILS_PANEL_ICON_ACTION_CLASS as the first fix option.

Change

THREAD_DETAILS_PANEL_ICON_ACTION_CLASS gains justify-center, with a one-line comment on why the chip centers its own content. Nothing else changes: the panel path still owns its density and ignores size and variant, and the other panel part classes are untouched.

Scope and approval

Bug fix for the triaged issue #15306 (cosmetic). Triage confirmed it on current main and listed this change as a fix option. One underlying problem; the web-only change touches one style constant.

Verification

• The geometry follows from the classes: the chip is a 24px flex box with items-center; adding justify-center places the 14px icon at 5px from each edge instead of at the left edge, so the hover fill is symmetric around it. The same constant styles the three Automations icon buttons, so they center as well.
• pnpm run typecheck in apps/web: 0 errors. vp test run --project unit on ThreadRelationshipsControl.test.tsx, ThreadRelationshipsControl.agents.test.tsx and ThreadDetailsPanel.test.tsx: 10 passed. vp fmt --check: clean. vp lint --report-unused-disable-directives: exit 0.
• Not checked: a screenshot of the running app. The change is a single Tailwind utility on an existing flex container, so I did not add a test that asserts the class string.

Claude Fable 5.1 (claude-fable-5-1) in Claude Code did the implementation; the account holder reviewed and owns the commit.

[macroscopeapp]

Approvability

Verdict: Approved at 09315dd

Macroscope's review found this PR approvable — The PR makes a narrowly scoped cosmetic fix to center icons in existing thread-details controls. It changes only styling in one web component, with no API, data, default, deployment, or static-analysis implications.

^{You can add or adjust custom eligibility rules. Learn more.}

[coderabbitai]

Navigate logical layers of code changes, visualize relationships, and explore their blast radius.

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Configuration used: Repository: pingdotgg/t3code/.coderabbit.yaml
• Review profile: CHILL
• Plan: Advanced
• Run ID: 1bda590f-5a62-4526-a416-8cec3139b2d6

📥 Commits

Reviewing files that changed from the base of the PR and between 44bd4c9 and 09315dd.

📒 Files selected for processing (1)

• apps/web/src/components/chat/threadDetailsPanelStyles.ts

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 8 remain after this review.

---

📝 Walkthrough

Walkthrough

The thread details panel icon action class now includes justify-center to center the icon within the square action button.

Changes

Thread details action button alignment

Layer / File(s)	Summary
Center the action icon apps/web/src/components/chat/threadDetailsPanelStyles.ts	THREAD_DETAILS_PANEL_ICON_ACTION_CLASS adds justify-center to its class string.

Priority: ⬇️ Low

Estimated code review effort: 1 (Trivial) | ~3 minutes

Change: Bug fix

Suggested reviewers: t3dotgg

Merge Risk: ⚪ Minimal · up to 09315

The change centers the relevant panel action icons without affecting the standard Button path. No merge-blocking risk remains.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main change: centering the icon in the thread details panel action button.
Description check	✅ Passed	The description covers the problem, change, scope, and verification, and explains the reported issue and triage. It notes that no screenshot was checked, although the template requests screenshots for…
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 1…
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create a new PR

• Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

---

_{Comment @coderabbitai help to get the list of available commands.}

[juliusmarminge]

Note

Grok responding on behalf of Julius.

Closing as superseded by #15669, which just merged the same fix (centering the icon in the shared thread details icon button style in threadDetailsPanelStyles.ts) and resolves #15306. Thanks for digging into this, @abderbejaoui!