fix(ui): keep the last four small fields at 16 px on a phone

The Coach memory editor, the managed profile's handover link, the cycle
length fields and the command palette's search set a font size under
16 px on touch screens, so iOS zoomed the page when one took focus. They
now read 16 px on a touch screen and keep their smaller size under a
fine pointer, like the field primitives. With no field left over, the
guard's list of known offenders goes.
This commit is contained in:
Marc-André Bombeck committed 2026-11-12 13:08:45 +01:00
1 parent 8f3b640ab6
commit 0a71e8ffa5
5 files changed
+4 -26

No files matched your search

+1 -22
View File
@@ -304,20 +304,6 @@ function smallFields(
}
describe("no field call site goes under 16 px on a touch screen", () => {
/**
* Call sites still under 16 px, fixed by a change of their own. An entry
* that stops matching fails, so the list only shrinks.
*/
const OPEN: Readonly<Record<string, string>> = {
"components/settings/coach-memory-section.tsx":
"/settings/coach memory editor",
"components/settings/access/managed-profile-handover.tsx":
"read-only handover link field",
"components/cycle/cycle-settings.tsx": "raw cycle-length number field",
"components/command-palette/command-palette.tsx":
"search field shrinks at `md:` without `pointer-fine:`",
};
const scan = productionSources()
.filter((rel) => rel.endsWith(".tsx"))
.map((rel) => ({ rel, ...smallFields(rel, readSrc(rel)) }));
@@ -349,13 +335,6 @@ describe("no field call site goes under 16 px on a touch screen", () => {
});
it("no typed-into field sets a size under 16 px outside a fine pointer", () => {
const offenders = scan
.filter((file) => !(file.rel in OPEN))
.flatMap((file) => file.small);
expect(offenders).toEqual([]);
});
it.each(Object.keys(OPEN))("%s is still open", (rel) => {
expect(scan.find((file) => file.rel === rel)?.small ?? []).not.toEqual([]);
expect(scan.flatMap((file) => file.small)).toEqual([]);
});
});
@@ -329,7 +329,7 @@ export function PaletteBody({ isMobile }: { isMobile: boolean }) {
autoCorrect="off"
spellCheck={false}
enterKeyHint="go"
className="placeholder:text-muted-foreground h-14 min-w-0 flex-1 bg-transparent text-base outline-none md:text-sm"
className="placeholder:text-muted-foreground h-14 min-w-0 flex-1 bg-transparent text-base outline-none md:pointer-fine:text-sm"
/>
{isMobile ? (
<Button
+1 -1
View File
@@ -371,7 +371,7 @@ function PriorField({
max={max}
value={value}
onChange={(e) => onChange(e.target.value)}
className="border-input bg-background focus-visible:border-input-focus w-full rounded-md border px-3 py-2 text-sm focus-visible:outline-none"
className="border-input bg-background focus-visible:border-input-focus w-full rounded-md border px-3 py-2 text-base focus-visible:outline-none md:pointer-fine:text-sm"
/>
</div>
);
@@ -468,7 +468,7 @@ function HandoverLink({
id="managed-profile-handover-url"
readOnly
value={link.url}
className="min-w-0 flex-1 font-mono text-xs"
className="min-w-0 flex-1 font-mono md:pointer-fine:text-xs"
onFocus={(e) => e.currentTarget.select()}
/>
<Button
@@ -146,7 +146,6 @@ function FactRow({
maxLength={REMEMBER_FACT_MAX_CHARS}
rows={2}
onChange={(e) => setDraft(e.target.value)}
className="text-sm"
/>
<div className="flex flex-wrap items-center justify-end gap-2">
<Button