mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-09 04:50:59 +00:00
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:
1 parent
5a8ad3d895
commit
977f124b9e
1 file changed
+4
-1
@@ -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: {
|
||||
|
||||
Reference in new issue
Block a user