fix(quotes): TabsList height propagates correctly on mobile, search bar no longer overlaps tabs

On mobile widths (verified at 375px viewport), the 9 status tabs
wrap to 4 rows but the TabsList DOM reported height = 32px (one
row), so space-y-6 placed the search bar at y=254 — directly
overlapping tab rows 3 and 4.

Root cause: the @base-ui/react/tabs Root has `flex gap-2
data-horizontal:flex-col` baked in. When the wrapped TabsList's
intrinsic height (4 rows of 28px = 112px+) didn't propagate to the
flex-column parent, the next sibling was positioned based on the
shorter (single-row) computed height.

Fix: add `min-h-fit` to the TabsList override so the flex item
forces its content height regardless of the column's intrinsic
shrinkage. Verified at 375px width: tabs now correctly occupy
y=198-338 (4 wrapped rows), search bar at y=362 — clear 24px gap
with no overlap.

Also tightened the override:
- `inline-flex` -> `flex` (so the container is a full-width block
  flex item rather than inline fit-content)
- `items-center` -> `items-start` (so wrapped children don't
  cluster in the middle of an under-sized box)
- added `w-full` and `min-h-fit` to lock the height floor

`pb-4` from the earlier 'some space between tabs and search' tweak
is kept — now correctly visible as 16px additional breathing room
above the search bar's 40px input.

Scoped to the Quotes page only (one-line override) so other pages
that use the default TabsList (login grid, pricelist, customers)
are unaffected.
This commit is contained in:
SJCoetz 2026-07-26 23:50:48 +02:00
parent d33b61fb52
commit 6d63da70d0

View file

@ -364,7 +364,7 @@ export default function QuotesPage() {
</div>
<Tabs value={activeTab} onValueChange={(v) => { setActiveTab(v); setPage(1); }}>
<TabsList className="flex-wrap h-auto gap-1 bg-transparent p-0 pb-4">
<TabsList className="flex flex-wrap h-auto min-h-fit w-full items-start justify-start gap-1 bg-transparent p-0 pb-4">
{TAB_ORDER.map((tab) => (
<TabsTrigger
key={tab.key}