mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-11 13:52:20 +00:00
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:
1 parent
dcef89c59e
commit
957f8e9b93
2 files changed
+12
-7
No files matched your search
@@ -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 />
|
||||
|
||||
Reference in new issue
Block a user