From b6aefc677899814db3ca1b14075cb973daa2391a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= Date: Sun, 17 May 2026 17:14:27 +0200 Subject: [PATCH] ui(select): tighten trigger right padding for Safari parity Drop pr-2.5 + [&_svg:last-child]:mr-1 down to a flat pr-2 so the chevron parks at the same 8px gutter that Safari and Chromium legacy themes paint for the native date-input glyph. Chromium Material still reads aligned (16px button + 8px gutter = 24px). Removes the ~4px parity miss flagged in the W10 select-vs-date-input pairing. Co-Authored-By: Claude Opus 4.7 (1M context) --- src/components/ui/select.tsx | 20 ++++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx index 5ed5951e6..d69efe4aa 100644 --- a/src/components/ui/select.tsx +++ b/src/components/ui/select.tsx @@ -42,14 +42,18 @@ function SelectTrigger({ // 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.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", + // (`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", className, )} {...props}