From 6d63da70d0c18d01b126aa95f10c6c83c3a627f7 Mon Sep 17 00:00:00 2001
From: SJCoetz <s.coetzee6@my.milpark.ac.za>
Date: Sun, 26 Jul 2026 23:50:48 +0200
Subject: [PATCH] fix(quotes): TabsList height propagates correctly on mobile,
 search bar no longer overlaps tabs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 src/app/(app)/quotes/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/(app)/quotes/page.tsx b/src/app/(app)/quotes/page.tsx
index 4b22eb0..466a7a6 100644
--- a/src/app/(app)/quotes/page.tsx
+++ b/src/app/(app)/quotes/page.tsx
@@ -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}