# Tabs

## 2026-08-12 — Line-variant active indicator moves to `bottom-0`

**Prompted by:** Hellen Tran (PO) — consistent active line on scrollable main tabs

### What changed
- The `line` (underline) variant's active indicator moved from `bottom-[-5px]` (5px below the
  trigger) to `bottom-0` (the trigger's bottom edge).
- Line-variant triggers now use `h-full` (instead of the filled pill's `h-[calc(100%-1px)]`) so the
  `bottom-0` indicator lands exactly on the TabsList's border-b divider.

### Why
- At `bottom-[-5px]` the indicator sits outside the trigger box, so any horizontal-scroll container
  (needed for arrow-paged / scrollable main tabs) clips it. `bottom-0` keeps it inside the box, so
  the active line renders identically whether or not the tab row scrolls.

### Affected tokens / files
- `packages/shadcn/src/components/ui/tabs.tsx`

## 2026-07-28 — Add `width` TabsList variant (fit / fill / scroll)

**Prompted by:** frontend Storybook backfill (Sprint B — budget-bucket tabs)

### What changed
- New optional `width` prop on `TabsList` — one axis modelling how the list sizes itself and lays out its triggers (default `"fit"`, so existing tabs are unchanged):
  - `fit` (default) — hugs its content, centred (natural trigger widths).
  - `fill` — spans the full width and stretches triggers equally (`flex-1`).
  - `scroll` — spans the full width but keeps triggers at natural width (`flex-none`, extra `px-3`) and scrolls horizontally with a hidden scrollbar when they overflow. Mirrors MUI's `variant="scrollable"`.

### Why
- The dashboard budget-bucket panel needs the five tabs to fill the card width (`fill`), and narrower surfaces need horizontal scroll (`scroll`). Modelling all three on one `width` axis keeps the behaviours coherent instead of a mix of a boolean prop and ad-hoc `className="w-full"` overrides.

### Affected tokens / files
- `packages/shadcn/src/components/ui/tabs.tsx` (`tabsListVariants`, `TabsList`, `TabsTrigger`)