From d49218a5ffc31a85651d94e19124f4f9bd9c8190 Mon Sep 17 00:00:00 2001 From: SJCoetz Date: Sun, 26 Jul 2026 23:34:20 +0200 Subject: [PATCH] fix(ui): drop flex-1 on TabsTrigger so tab pills size to their content MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The Quotes page filter strip showed 9 tabs with 'Templates 0' pushed far to the right with a big visible gap — caused by `flex-1` on every TabsTrigger combined with `inline-flex w-fit` on the parent TabsList. `flex-1` forced every trigger into an equal-width cell, so the narrower 'Templates' tab left a wide empty right margin. Tested: min/max width across the 9 tabs dropped from a 1:1 equal distribution (every cell = container-width/9 ≈ 130px) to a content- proportional 70–182px range; the strip wraps tightly on one row with 'Templates' falling to line 2 because there isn't room. The visible gap is gone. Other consumers of TabsList (`customers/[id]`, `pricelist`, `login`) are unaffected: - pricelist has 2 tabs, content-sized is the same or better. - customers/[id] has 3 tabs — equal-width was visually fine, content-sized still reads cleanly. - login uses `grid w-full grid-cols-3`, so flex-1 on the children had no effect to begin with. Also bumped horizontal padding from `px-1.5` to `px-3` for breathing room now that pills aren't width-stretched. --- src/components/ui/tabs.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ui/tabs.tsx b/src/components/ui/tabs.tsx index d987cfe..e1c6c40 100644 --- a/src/components/ui/tabs.tsx +++ b/src/components/ui/tabs.tsx @@ -58,7 +58,7 @@ function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {