fix(web): stop the status label stacking on the row's settle actions

[Sy-D]

What Changed

Two things in the v2 sidebar row's status slot:

1. The status label no longer stays visible when focus promotes the settle/snooze actions into the same slot.
2. The label aligns to the row's baseline, with its leading icon optically centred on the text.

Why

The overlap (#4817)

The label and the hover actions share one slot and are meant to be mutually exclusive. The hover branch was symmetric — the label gets opacity-0, the actions get opacity-100. The focus branch was not: group-focus-within pulled the label out of flow with absolute right-0 but never faded it, so the actions came up to full opacity underneath a label that was still fully opaque and pinned right.

That explains why the report reads as intermittent and hover-driven when it is neither. Focus is sticky: clicking Settle or Snooze leaves focus on the button, and dismissing the snooze popover returns focus to its trigger, at which point snoozeMenuOpen stops forcing the label transparent while focus keeps the actions promoted. The overlap then outlives the pointer. Keyboard tabbing reaches it too. In the reporter's screenshot the affected row is the active row, not a hovered one — which is what pointed at focus rather than hover.

Because the correctness property is a pairing — every variant that promotes the actions must fade the label — both class strings now live in one helper, and the tests assert that pairing generically instead of matching literal strings. Removing the new opacity-0 fails them.

The alignment

An inline-flex derives its baseline from its first flex item, and an SVG has none, so the leading 16px icon was setting the label's baseline and lifting "Working" above the project title. The text run now aligns on the baseline and the icon opts out with self-center, so it rides the centre of the text's line box. No pixel nudges.

Validation

Measured in a running client on a seeded working row, toggling the classes live to get a real before/after:

Alignment — baselines in page coordinates:

	project label	"Working"	duration	icon centre	label box centre
before	243	241	—	237	237
after	243	243	243	239	239

Off by 2px before, exactly aligned after; the icon stays centred on the text in both.

The overlap — computed styles with focus inside the slot:

	label opacity	actions opacity	both visible
without the fix	1 (absolute, right-0)	1	yes
with the fix	0	1	no

Idle is unchanged: label 1, actions 0.

• vp run --filter @t3tools/web test — 1644 passed
• vp run --filter @t3tools/web typecheck — no errors
• vp lint / vp fmt --check on the changed files — clean

Notes For Review

The actions' focus-within: is restated as group-focus-within/v2-status-slot: so both halves key off the identical condition. Behaviourally equivalent here — the action buttons are the only focusable elements in the slot — but it makes the pairing checkable.

The slim settled/snoozed row has a similar inline-flex items-center badge. It never renders the working state, so it is untouched.

Closes #4817.

Checklist

• This PR is small and focused
• I explained what changed and why
• Before/after screenshots — the issue carries the "before"; an "after" still needs attaching, so this stays draft until then

Before

After with alignment fix

Bildschirmaufnahme.2026-07-29.um.11.30.14.mov

Note

[!NOTE]

Fix status label overlapping settle actions in sidebar rows

• Introduces resolveSidebarV2StatusSlotClassNames in Sidebar.logic.ts to compute paired Tailwind class names for the status label and action buttons in a shared slot.
• The status label fades out and moves out of flow on group hover/focus or when the snooze popover is open; actions become visible and in-flow under the same conditions.
• Updates SidebarV2.tsx to use the new utility, replacing the previous inline class logic that caused the label and actions to stack.
• Also fixes a 2px vertical drift by aligning the status container to items-baseline with self-center on leading icons.

^{Macroscope summarized d9c2058.}

---

Note

Low Risk
Scoped UI/CSS in sidebar v2 rows with regression tests on the class pairing; no auth, data, or API changes.

Overview
Fixes v2 sidebar card rows where the status text (e.g. "Working") could sit on top of Settle/Snooze after focus stayed on those controls—the focus path promoted actions but did not fade the label, unlike hover.

resolveSidebarV2StatusSlotClassNames in Sidebar.logic.ts now returns paired Tailwind classes for the label and action halves of the shared status slot (hover, group-focus-within/v2-status-slot, and open snooze popover). SidebarV2.tsx uses that helper instead of inline cn(...) on each span. Action visibility keys off the same group-focus-within/v2-status-slot condition as the label hide.

Also adjusts status vertical alignment: items-baseline on the label row and self-center on leading icons so the working icon no longer pulls the text ~2px above the project title.

Unit tests assert the pairing invariant (every action-reveal variant must apply matching opacity-0 on the label).

^{Reviewed by Cursor Bugbot for commit d9c2058. Bugbot is set up for automated code reviews on this repo. Configure here.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: c11d3232-653c-411d-93f2-c71dd26b4fc0

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[macroscopeapp]

Approvability

Verdict: Approved 4cd31b7

This is a straightforward CSS fix for a visual stacking issue where the status label was appearing on top of settle actions. The changes extract class logic into a testable helper, add the missing opacity transitions, and include comprehensive tests to maintain the invariant.

^{You can customize Macroscope's approvability policy. Learn more.}