fix(dashboard): lift medication-intake quick-add CTA + footer to 44 px floor

W-CI raised the onboarding checklist toggle and the intake-history
pager to the 44 px mobile touch floor (WCAG 2.5.5). The new
medication-intake quick-add sheet sibling shipped with an empty-state
CTA at h-8 (size="sm" default) and footer Save/Cancel buttons at h-10,
both below the project-wide floor and visibly inconsistent with the
sibling MoodForm / MeasurementForm + the rest of the v1.4.37 surfaces.

Apply the established min-h-11 sm:min-h-9 override to the empty-state
CTA, the footer Save/Cancel, and the empty-state Close button. Extend
the SSR contract test to count three min-h-11 floors instead of two so
a future regression that drops one of the buttons back below 44 px
trips before the release.
This commit is contained in:
Marc-André Bombeck committed 2026-05-17 15:27:09 +02:00
1 parent c0c1b6b86a
commit de2bdd6fc8
2 files changed
+23 -4

No files matched your search

@@ -144,6 +144,11 @@ describe("<MedicationIntakeQuickAdd> — SSR contract", () => {
expect(html).not.toContain(
'data-testid="medication-intake-quick-add-form"',
);
// v1.4.37 W10 — the empty-state CTA must clear the 44 px touch
// floor that W-CI raised on the onboarding checklist. The
// `size="sm"` default would land at 32 px without an explicit
// `min-h-11 sm:min-h-9` override.
expect(html).toContain("min-h-11");
});
it("renders the populated form with picker + dose + time fields", () => {
@@ -164,8 +169,10 @@ describe("<MedicationIntakeQuickAdd> — SSR contract", () => {
expect(html).toContain(
'data-testid="medication-intake-quick-add-taken-at"',
);
// 44 px touch floor on every interactive field (WCAG 2.5.5).
expect(html.match(/min-h-11/g)?.length ?? 0).toBeGreaterThanOrEqual(2);
// 44 px touch floor on every interactive field + the footer Save
// button (WCAG 2.5.5). v1.4.37 W10 added the floor to the footer
// buttons; the form fields already carried it.
expect(html.match(/min-h-11/g)?.length ?? 0).toBeGreaterThanOrEqual(3);
});
it("does not leak raw i18n keys in either locale", () => {
@@ -272,6 +272,7 @@ export function MedicationIntakeQuickAdd({
variant="outline"
onClick={onCancel}
disabled={loading}
className="min-h-11 sm:min-h-9"
>
{t("common.cancel")}
</Button>
@@ -280,6 +281,7 @@ export function MedicationIntakeQuickAdd({
type="submit"
form={formId}
disabled={loading || !medicationId || medications.length === 0}
className="min-h-11 sm:min-h-9"
>
{loading ? (
<Loader2 className="mr-2 h-4 w-4 animate-spin motion-reduce:animate-none" />
@@ -299,7 +301,12 @@ export function MedicationIntakeQuickAdd({
const emptyFooter = (
<div className="flex w-full items-center justify-end gap-2">
{onCancel && (
<Button type="button" variant="outline" onClick={onCancel}>
<Button
type="button"
variant="outline"
onClick={onCancel}
className="min-h-11 sm:min-h-9"
>
{t("common.close")}
</Button>
)}
@@ -322,7 +329,12 @@ export function MedicationIntakeQuickAdd({
{t("dashboard.medicationIntakeQuickAdd.emptyDescription")}
</p>
</div>
<Button asChild size="sm" variant="outline">
<Button
asChild
size="sm"
variant="outline"
className="min-h-11 sm:min-h-9"
>
<Link href="/medications">
{t("dashboard.medicationIntakeQuickAdd.emptyCta")}
</Link>