mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-15 15:02:04 +00:00
fix(admin): remove spurious scrollbar from feedback tab strip
Marc reported a stray "mini scroll-button" on the right side of the admin feedback inbox tab strip (Open / Acknowledged / Resolved / Archived). The four short tabs do not horizontally overflow the viewport, so the painted bar surprised him every time he opened the inbox. Root cause is a CSS overflow coupling: setting only `overflow-x: auto` silently forces `overflow-y` to `auto` too, because a single axis cannot be `visible` while the other clips. The strip is locked at `h-9` (36 CSS px) but its badge children (`py-0.5` + text-xs digits) ride 1-2 px taller than the strip on some glyph stacks, so the implicit `overflow-y: auto` paints a tiny vertical scrollbar on the right edge. Fix is a single class on `tabsListVariants`: `overflow-y-hidden` (plus `overflow-y-visible` in the vertical-orientation override so vertical tab columns are not affected). Horizontal swipe and keyboard-arrow scrolling still work — only the implicit y-axis bar is suppressed. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
1 parent
ef67da5570
commit
088832aa39
2 files changed
+44
-1
No files matched your search
@@ -0,0 +1,33 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
import { renderToStaticMarkup } from "react-dom/server";
|
||||
|
||||
import { Tabs, TabsList, TabsTrigger } from "../tabs";
|
||||
|
||||
describe("<TabsList>", () => {
|
||||
it("clamps the y-axis so a fixed-height strip never paints a vertical scrollbar", () => {
|
||||
// Marc reported a stray "mini scroll-button" on the right side of
|
||||
// the feedback inbox tab strip (Open / Acknowledged / Resolved /
|
||||
// Archived). Root cause: `overflow-x-auto` couples to `overflow-y`
|
||||
// — once one axis is `auto`, the other can no longer be `visible`,
|
||||
// so the browser silently flips it to `auto` too. Combined with
|
||||
// the fixed `h-9` strip and the badges (`py-0.5` + text-xs) that
|
||||
// ride 1-2 px taller than the strip on some glyph stacks, a
|
||||
// tiny vertical scrollbar paints on the right edge.
|
||||
//
|
||||
// Locking `overflow-y-hidden` on the strip kills the painted bar
|
||||
// without touching the horizontal swipe behaviour.
|
||||
const html = renderToStaticMarkup(
|
||||
<Tabs defaultValue="a">
|
||||
<TabsList>
|
||||
<TabsTrigger value="a">A</TabsTrigger>
|
||||
<TabsTrigger value="b">B</TabsTrigger>
|
||||
</TabsList>
|
||||
</Tabs>,
|
||||
);
|
||||
const list = html.match(/<div\b[^>]*data-slot="tabs-list"[^>]*>/);
|
||||
expect(list).not.toBeNull();
|
||||
expect(list![0]).toMatch(/\boverflow-y-hidden\b/);
|
||||
// Horizontal scroll behaviour is still intact for long strips.
|
||||
expect(list![0]).toMatch(/\boverflow-x-auto\b/);
|
||||
});
|
||||
});
|
||||
Reference in new issue
Block a user