fix(ui): stop the models tab strip from scrolling vertically

The tab strip carried overflow-x-auto directly on the TabsList. CSS forces
overflow-y from visible to auto once overflow-x is not visible, and the line
variant's active-tab underline is an absolutely positioned ::after that hangs
5px below its trigger, so the strip picked up a pixel of vertical scroll on top
of the horizontal scroll it actually wants.

The scroll container now lives on a wrapper whose bottom padding leaves room for
the underline, offset by a matching negative margin so the row keeps its exact
geometry.
This commit is contained in:
Yuneng Jiang 2026-08-14 17:44:00 -07:00
parent 118523ede6
commit 5219658b8f
No known key found for this signature in database

View file

@ -175,16 +175,18 @@ export default function ModelsAndEndpointsPage() {
) : (
<Tabs value={activeKey} onValueChange={setActiveKey}>
<div className="flex min-w-0 flex-nowrap items-center gap-3 border-b">
<TabsList variant="line" className="min-w-0 flex-1 justify-start overflow-x-auto">
{visibleSlugs.map((slug) => {
const key = slug || BASE_TAB_KEY;
return (
<TabsTrigger key={key} value={key} className="flex-none">
{tabLabel(slug)}
</TabsTrigger>
);
})}
</TabsList>
<div className="-mb-1.5 min-w-0 flex-1 overflow-x-auto pb-1.5">
<TabsList variant="line" className="w-max justify-start">
{visibleSlugs.map((slug) => {
const key = slug || BASE_TAB_KEY;
return (
<TabsTrigger key={key} value={key} className="flex-none">
{tabLabel(slug)}
</TabsTrigger>
);
})}
</TabsList>
</div>
<div className="flex shrink-0 items-center gap-2 pb-1">
{lastRefreshed && (
<span className="text-xs text-muted-foreground">Last Refreshed: {lastRefreshed}</span>