fix(ui): widen TabsList padding so the focus ring fits inside the clamp

`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) <noreply@anthropic.com>
This commit is contained in:
Marc-André BombeckandClaude Opus 4.7 committed 2026-05-10 14:26:18 +02:00
1 parent 5a8ad3d895
commit 977f124b9e
1 file changed
+4 -1
+4 -1
View File
@@ -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: {