mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-12 22:26:13 +00:00
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:
1 parent
8f3b640ab6
commit
0a71e8ffa5
5 files changed
+4
-26
No files matched your search
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in new issue
Block a user