From 708d012d281474718110a3a280744cbd4a213306 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= Date: Tue, 2 Jun 2026 13:21:21 +0200 Subject: [PATCH] fix(ui): make select trigger horizontal padding symmetric The select trigger used pl-3 pr-2 (12 px left, 8 px right), parking the chevron visibly closer to the right edge than the value text sits from the left. Use px-3 so both gutters are 12 px; the gap-2 between value and chevron and the chevron's shrink-0 keep it from crowding or clipping. Co-Authored-By: Claude Opus 4.8 (1M context) (cherry picked from commit aaea4ea8102d8f74ea039fc6764ee2e3e5474afc) --- src/components/ui/select.tsx | 22 +++++++++------------- 1 file changed, 9 insertions(+), 13 deletions(-) diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx index d69efe4aa..d81dbcd6b 100644 --- a/src/components/ui/select.tsx +++ b/src/components/ui/select.tsx @@ -41,19 +41,15 @@ function SelectTrigger({ // clear WCAG 2.5.5 and shrinks to 40 px on sm+ to match the // desktop input rhythm. `size=sm` (filter chips) intentionally // keeps the 32 px footprint. - // v1.4.37 W4a item 4 — split the trigger's horizontal padding - // (`pl-3 pr-2`) so the trailing chevron parks at the same - // visual gutter as the browser-native date-input calendar - // icon. The old uniform `px-3` parked the chevron 12 px from - // the edge, which read visibly tighter than the date-picker - // glyph when both controls shared a form row. - // v1.4.38 W-D P1-6 — drop the `[&_svg:last-child]:mr-1` - // double-shift and tighten `pr-2.5` to `pr-2`. The previous - // 14 px combined gutter (10 + 4) hit Chromium-Material native - // date-inputs cleanly but lagged ~4 px against Safari and - // Chromium-legacy themes; `pr-2` (8 px) lands the chevron - // inside the gutter the non-Material engines actually paint. - "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent pl-3 pr-2 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-11 data-[size=default]:sm:h-10 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", + // v1.8.7.1 — symmetric horizontal padding. The earlier asymmetric + // `pl-3 pr-2` (12 px left / 8 px right) parked the trailing chevron + // visibly closer to the right edge than the value text sits from the + // left, so the trigger read lopsided. Match the right gutter to the + // left text padding (`px-3` → both 12 px) so the chevron and the + // value are inset equally; `gap-2` between them keeps the chevron + // from crowding a long value, and `shrink-0` guarantees it never + // clips. + "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-11 data-[size=default]:sm:h-10 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className, )} {...props}