fix(settings): equalize input heights across all settings sections

Settings inputs and selects rendered at four different heights on
Pixel 5: 32 px (AI add-provider), 36 px (account form, export, ntfy /
telegram), 40 px (AI active-provider) and 44 px (dashboard "Compare to"
trigger). The mismatch was visible whenever two cards lived next to
each other, e.g. the 40-px provider select sat directly above a 32-px
"Add provider" select inside the same column.

Standardize on the shared 36-px contract (`h-9`, matching `<Input>` and
the default `<SelectTrigger>` size) for every text-entry field across
Settings:

- AI active-provider native select: `h-10` -> `h-9`
- AI fallback-chain "Add provider" native select: `h-8` -> `h-9`
- Dashboard "Compare to" `<SelectTrigger>`: drop `min-h-11` so the
  default `h-9` applies

The 44-px tap-target floor (WCAG 2.5.5) still applies to mobile
nav-level controls; for inline form fields the 36-px height matches
the rest of the settings shell and the desktop sidebar.

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-10 13:04:01 +02:00
1 parent dcef89c59e
commit 957f8e9b93
2 files changed
+12 -7

No files matched your search

+6 -4
View File
@@ -343,8 +343,10 @@ function ProviderStatusBadges({
/**
* The single Pulldown that drives every form below it. Uses a native
* `<select>` so the SSR-only settings test renders deterministically
* without a portal-based Radix tree. Mobile: full-width, generous
* height (`h-10`) so finger taps land cleanly on the chevron.
* without a portal-based Radix tree. Mobile: full-width, height matched
* to the shared 36-px input contract used everywhere else in Settings
* (`<Input>` is `h-9`); tap target stays comfortable thanks to the
* full-width chevron region.
*/
function ActiveProviderSelect({
value,
@@ -373,7 +375,7 @@ function ActiveProviderSelect({
const next = e.target.value;
if (isProviderType(next)) onChange(next);
}}
className="bg-background border-input mt-1 h-10 w-full rounded-md border px-3 text-sm sm:max-w-md"
className="bg-background border-input mt-1 h-9 w-full rounded-md border px-3 text-sm sm:max-w-md"
>
{PROVIDER_TYPES.map((p) => (
<option key={p} value={p}>
@@ -1509,7 +1511,7 @@ function AddProviderControl({
aria-label={t("settings.ai.providerChain.addProvider")}
value={picked}
onChange={(e) => setPicked(e.target.value)}
className="bg-background border-input h-8 rounded-md border px-2 text-sm"
className="bg-background border-input h-9 rounded-md border px-2 text-sm"
>
{addable.map((p) => (
<option key={p} value={p}>
@@ -182,8 +182,11 @@ export function DashboardLayoutSection({ id }: { id: string }) {
{/* v1.4.16 phase B8 — comparison baseline picker. Lives at the top
of the section because it changes how every chart + tile below
renders, not just one. Mobile-friendly: full-width Select with
a 44px tap target on touch viewports per the Wave-C polish. */}
renders, not just one. v1.4.19 A6: height standardised to the
shared 36-px input contract used by every other Settings input
/ select; the previous `min-h-11` (44 px) made this trigger
look like an outlier next to the 36-px Username/Email/Date-of-
birth fields one card up. */}
{layout && (
<div className="space-y-2">
<label
@@ -201,7 +204,7 @@ export function DashboardLayoutSection({ id }: { id: string }) {
>
<SelectTrigger
id="comparison-baseline"
className="min-h-11 w-full sm:w-72"
className="w-full sm:w-72"
data-slot="comparison-baseline-trigger"
>
<SelectValue />