diff --git a/ApiCore-Frontend/src/components/form/choice-group.tsx b/ApiCore-Frontend/src/components/form/choice-group.tsx index 68853ec..bb5621f 100644 --- a/ApiCore-Frontend/src/components/form/choice-group.tsx +++ b/ApiCore-Frontend/src/components/form/choice-group.tsx @@ -83,7 +83,7 @@ function targetIndex(key: string, current: number, count: number): number | null const OPTION_CLASS: Record = { buttons: - "inline-flex min-h-11 items-center justify-center gap-1.5 rounded-lg px-2 text-base motion-safe:transition-colors", + "inline-flex min-h-11 min-w-0 items-center justify-center gap-1.5 rounded-lg px-2 py-1 text-base motion-safe:transition-colors", cards: "flex min-h-14 w-full items-start gap-3 rounded-lg px-3 py-2 text-left text-base motion-safe:transition-colors", }; @@ -141,7 +141,9 @@ function OptionContent({ ) : null} ) : ( - {label} + // A long label („Nicht geprüft“ in three columns on a phone) wraps + // instead of running into the frame. + {label} )} ); diff --git a/ApiCore-Frontend/src/components/ui/button.tsx b/ApiCore-Frontend/src/components/ui/button.tsx index 8a52852..6c503eb 100644 --- a/ApiCore-Frontend/src/components/ui/button.tsx +++ b/ApiCore-Frontend/src/components/ui/button.tsx @@ -68,7 +68,13 @@ function Button({ ) diff --git a/ApiCore-Frontend/src/components/ui/ui-sizes.spec.tsx b/ApiCore-Frontend/src/components/ui/ui-sizes.spec.tsx index 894bfe1..b07b911 100644 --- a/ApiCore-Frontend/src/components/ui/ui-sizes.spec.tsx +++ b/ApiCore-Frontend/src/components/ui/ui-sizes.spec.tsx @@ -85,12 +85,15 @@ describe("ui sizes, type and focus (spec 4.5, 4.6)", () => { , ); expect(screen.getByRole("button", { name: "Fett" })).toHaveAttribute("aria-pressed", "true"); + // Not by colour alone: a pressed button also gets the 2 px ink frame. + expect(screen.getByRole("button", { name: "Fett" })).toHaveClass("border-2", "border-foreground"); rerender( , ); expect(screen.getByRole("button", { name: "Fett" })).toHaveAttribute("aria-pressed", "false"); + expect(screen.getByRole("button", { name: "Fett" })).not.toHaveClass("border-2"); rerender(); expect(screen.getByRole("button", { name: "Fett" })).not.toHaveAttribute("aria-pressed"); });