tom/HealthLog
1
0 Fork 0
mirror of https://github.com/MBombeck/HealthLog.git synced 2026-11-09 04:50:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

ui(select): tighten trigger right padding for Safari parity

Browse Source 
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) <noreply@anthropic.com>
This commit is contained in:
Marc-André BombeckandClaude Opus 4.7 committed 2026-05-17 17:14:27 +02:00
1 parent 94d90f31ea
commit b6aefc6778
1 file changed
+12 -8
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ui/select.tsx
+12 -8
View File
@@ -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}