From 95ddfaae96b3cadd4e1535a5e0d5f8d9fde9548c Mon Sep 17 00:00:00 2001
From: Illia Panasenko <hello@ipanasenko.me>
Date: Sun, 26 Jul 2026 15:21:52 +0200
Subject: [PATCH] fix(web): stop settle controls overlapping the status label

The sidebar card row revealed its Snooze/Settle overlay on focus-within.
A mouse click leaves the Settle button focused, so once the pointer left
the row the overlay stayed pinned while the status label -- which only
hides on row hover -- faded back in underneath it, printing "Working"
over "Settle" (easy to hit when settling fails and you move over to
dismiss the toast).

Reveal on focus-visible instead, matching the compact row variant, and
hide the status label while focus is inside the overlay so keyboard
focus still cross-fades cleanly.
---
 apps/web/src/components/SidebarV2.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/components/SidebarV2.tsx b/apps/web/src/components/SidebarV2.tsx
index 8c5891ebe7e..bd1e5670da3 100644
--- a/apps/web/src/components/SidebarV2.tsx
+++ b/apps/web/src/components/SidebarV2.tsx
@@ -879,10 +879,10 @@ const SidebarV2Row = memo(function SidebarV2Row(props: {
               ) : (
                 <span className="flex-1" />
               )}
-              <span className="relative ml-auto flex h-5 min-w-8 shrink-0 items-center justify-end pl-1 text-xs">
+              <span className="group/v2-status relative ml-auto flex h-5 min-w-8 shrink-0 items-center justify-end pl-1 text-xs">
                 <span
                   className={cn(
-                    "tabular-nums text-muted-foreground/65 transition-opacity group-hover/v2-row:opacity-0",
+                    "tabular-nums text-muted-foreground/65 transition-opacity group-hover/v2-row:opacity-0 group-has-[:focus-visible]/v2-status:opacity-0",
                     snoozeMenuOpen && "opacity-0",
                   )}
                 >
@@ -917,7 +917,12 @@ const SidebarV2Row = memo(function SidebarV2Row(props: {
                 {props.settlementSupported || showSnoozeButton ? (
                   <span
                     className={cn(
-                      "absolute inset-y-0 right-0 flex items-stretch gap-0.5 opacity-0 transition-opacity focus-within:opacity-100 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 gap-0.5 opacity-0 transition-opacity group-hover/v2-row:opacity-100 has-[:focus-visible]:opacity-100",
                       snoozeMenuOpen && "opacity-100",
                     )}
                   >