authorgravatar for hello@ipanasenko.meIllia Panasenko <hello@ipanasenko.me> 2026-08-01 21:06:31+02:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-08-01 15:06:31-04:00
log78eb3ecae981a6fce108cd3ecc44a6832b4cd3a0
tree828adee0f96ad0dee6cd245e86d6beb7e0cda49a
parentd3037064e61a9f059eafbd4f9869679779bd2a7c
signature Signed by PGP key B5690EEEBB952194

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

1 files changed, 8 insertions(+), 3 deletions(-)

apps/web/src/components/SidebarV2.tsx+8-3
...@@ -938,7 +938,7 @@ const SidebarV2Row = memo(function SidebarV2Row(props: {...@@ -938,7 +938,7 @@ const SidebarV2Row = memo(function SidebarV2Row(props: {
938 <span className="flex-1" />938 <span className="flex-1" />
939 )}939 )}
940 {/* The visible state owns this slot's width: status at rest,940 {/* The visible state owns this slot's width: status at rest,
941 actions on hover/focus or while the popover is open. Keeping941 actions on hover/keyboard focus or while the popover is open. Keeping
942 the hidden state out of flow lets the project label reclaim942 the hidden state out of flow lets the project label reclaim
943 space without either state overlapping it. */}943 space without either state overlapping it. */}
944 <span className="group/v2-status-slot relative ml-auto flex h-5 min-w-8 shrink-0 items-stretch justify-end text-xs">944 <span className="group/v2-status-slot relative ml-auto flex h-5 min-w-8 shrink-0 items-stretch justify-end text-xs">
...@@ -947,7 +947,7 @@ const SidebarV2Row = memo(function SidebarV2Row(props: {...@@ -947,7 +947,7 @@ const SidebarV2Row = memo(function SidebarV2Row(props: {
947 buttons; without it the invisible label eats their clicks. */}947 buttons; without it the invisible label eats their clicks. */}
948 <span948 <span
949 className={cn(949 className={cn(
950 "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",950 "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",
951 snoozeMenuOpen && "absolute right-0 opacity-0",951 snoozeMenuOpen && "absolute right-0 opacity-0",
952 )}952 )}
953 >953 >
...@@ -982,7 +982,12 @@ const SidebarV2Row = memo(function SidebarV2Row(props: {...@@ -982,7 +982,12 @@ const SidebarV2Row = memo(function SidebarV2Row(props: {
982 {props.settlementSupported || showSnoozeButton ? (982 {props.settlementSupported || showSnoozeButton ? (
983 <span983 <span
984 className={cn(984 className={cn(
985 "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",985 // focus-visible, not focus-within: a mouse click leaves
986 // the Settle button focused, and a plain focus-within
987 // would keep the controls pinned over the status label
988 // once the pointer moves away (e.g. after a failed
989 // settle) instead of cross-fading back.
990 "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",
986 snoozeMenuOpen && "static opacity-100",991 snoozeMenuOpen && "static opacity-100",
987 )}992 )}
988 >993 >