Skip to content

fix(web): stop settle controls overlapping the status label #4574

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
maria-rcks merged 2 commits into from
Aug 1, 2026
Merged

fix(web): stop settle controls overlapping the status label #4574

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
95ddfaa
fix(web): stop settle controls overlapping the status label
ipanasenko Jul 26, 2026
d889541
Merge remote-tracking branch 'origin/main' into fix/settle-controls-o…
ipanasenko Jul 31, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 8 additions & 3 deletions apps/web/src/components/SidebarV2.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -938,7 +938,7 @@ const SidebarV2Row = memo(function SidebarV2Row(props: {
<span className="flex-1" />
)}
{/* The visible state owns this slot's width: status at rest,
actions on hover/focus or while the popover is open. Keeping
actions on hover/keyboard focus or while the popover is open. Keeping
the hidden state out of flow lets the project label reclaim
space without either state overlapping it. */}
<span className="group/v2-status-slot relative ml-auto flex h-5 min-w-8 shrink-0 items-stretch justify-end text-xs">
Expand All @@ -947,7 +947,7 @@ const SidebarV2Row = memo(function SidebarV2Row(props: {
buttons; without it the invisible label eats their clicks. */}
<span
className={cn(
"pointer-events-none self-center justify-self-end tabular-nums text-muted-foreground/65 transition-opacity group-focus-within/v2-status-slot:absolute group-focus-within/v2-status-slot:right-0 group-hover/v2-row:absolute group-hover/v2-row:right-0 group-hover/v2-row:opacity-0",
"pointer-events-none self-center justify-self-end tabular-nums text-muted-foreground/65 transition-opacity group-has-[:focus-visible]/v2-status-slot:absolute group-has-[:focus-visible]/v2-status-slot:right-0 group-has-[:focus-visible]/v2-status-slot:opacity-0 group-hover/v2-row:absolute group-hover/v2-row:right-0 group-hover/v2-row:opacity-0",
snoozeMenuOpen && "absolute right-0 opacity-0",
)}
>
Expand Down Expand Up @@ -982,7 +982,12 @@ const SidebarV2Row = memo(function SidebarV2Row(props: {
{props.settlementSupported || showSnoozeButton ? (
<span
className={cn(
"absolute inset-y-0 right-0 flex items-stretch opacity-0 transition-opacity focus-within:static focus-within:opacity-100 group-hover/v2-row:static group-hover/v2-row:opacity-100",
// focus-visible, not focus-within: a mouse click leaves
// the Settle button focused, and a plain focus-within
// would keep the controls pinned over the status label
// once the pointer moves away (e.g. after a failed
// settle) instead of cross-fading back.
"absolute inset-y-0 right-0 flex items-stretch opacity-0 transition-opacity has-[:focus-visible]:static has-[:focus-visible]:opacity-100 group-hover/v2-row:static group-hover/v2-row:opacity-100",
snoozeMenuOpen && "static opacity-100",
)}
>
Expand Down
Loading