From 977f124b9e6b28540dc2af446b0c31f461ef4f76 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= Date: Sun, 10 May 2026 14:26:18 +0200 Subject: [PATCH] fix(ui): widen TabsList padding so the focus ring fits inside the clamp MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit `overflow-y-hidden` on the tabs strip clipped the bottom of the focus-visible ring (`ring-[3px]`) on triggers because the parent padding was only 3 px — the 3 px ring ended exactly at the content-box edge. Bump the padding to `p-1` (4 px) so keyboard users see the full ring while the y-axis clamp still hides the painted scrollbar Marc reported. Co-Authored-By: Claude Opus 4.7 (1M context) --- src/components/ui/tabs.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/ui/tabs.tsx b/src/components/ui/tabs.tsx index 16bef7550..8e48bb1dc 100644 --- a/src/components/ui/tabs.tsx +++ b/src/components/ui/tabs.tsx @@ -44,8 +44,11 @@ function Tabs({ // (e.g. the admin feedback `Open / Acknowledged / Resolved / // Archived` tabs Marc reported in v1.4.19). Locking the y-axis hides // that bar without affecting horizontal swipe behaviour. +// Padding sits at `p-1` (4 px) so the 3 px focus-visible ring +// (`focus-visible:ring-[3px]`) on triggers stays inside the +// `overflow-y-hidden` clamp without clipping the bottom of the ring. const tabsListVariants = cva( - "rounded-lg p-[3px] group-data-[orientation=horizontal]/tabs:h-9 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit max-w-full items-center justify-center overflow-x-auto overflow-y-hidden touch-pan-x scrollbar-thin group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col group-data-[orientation=vertical]/tabs:overflow-x-visible group-data-[orientation=vertical]/tabs:overflow-y-visible", + "rounded-lg p-1 group-data-[orientation=horizontal]/tabs:h-9 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit max-w-full items-center justify-center overflow-x-auto overflow-y-hidden touch-pan-x scrollbar-thin group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col group-data-[orientation=vertical]/tabs:overflow-x-visible group-data-[orientation=vertical]/tabs:overflow-y-visible", { variants: { variant: {