From 96e9842963770699ce95732bd42bd2bbe8f8d0bc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= Date: Sun, 17 May 2026 14:20:54 +0200 Subject: [PATCH] ui(select): chevron right-margin parity with date-picker icon Split the trigger's horizontal padding (pl-3 pr-2.5) and push the chevron 4 px further right via [&_svg:last-child]:mr-1 so the trailing glyph sits 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. --- src/components/ui/select.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx index ebb9a9809..5ed5951e6 100644 --- a/src/components/ui/select.tsx +++ b/src/components/ui/select.tsx @@ -41,7 +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. - "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", + // v1.4.37 W4a item 4 — split the trigger's horizontal padding + // (`pl-3 pr-2.5`) and push the chevron icon 4 px further right + // via `[&_svg:last-child]:mr-1` so the trailing glyph parks at + // the same visual gutter as the browser-native date-input + // calendar icon (~16-20 px on Chromium). 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. + "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.5 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 [&_svg:last-child]:mr-1", className, )} {...props}