History

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

Illia Panasenko committed 3 months ago

Commit 78eb3ec1 parent d3037061 file · +8 −3Browse files

Unified · Split

apps/web/src/components/SidebarV2.tsx+8−3
@@ -938,7 +938,7 @@ const SidebarV2Row = memo(function SidebarV2Row(props: { · 937 unmodified lines
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: { · 2 unmodified lines
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: { · 28 unmodified lines
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 >