From 11bccbeb502a421fb14a7329cb800f15ae0e8840 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nick=20Rosenl=C3=B6cher?= <nick.rosenloecher@encry.de>
Date: Fri, 16 Oct 2026 19:03:30 +0200
Subject: [PATCH] =?UTF-8?q?fix(t5):=20=E2=80=9ENicht=20gepr=C3=BCft?=
 =?UTF-8?q?=E2=80=9C=20bricht=20um,=20gedr=C3=BCckte=20Kn=C3=B6pfe=20mit?=
 =?UTF-8?q?=20Tintenrahmen?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Browser-Prüfung A6: In drei Spalten lief das fette „Nicht geprüft“ in den
gestrichelten Rahmen; die Beschriftung bricht jetzt um. Fett/Kursiv
zeigten den gedrückten Zustand nur über die Füllfarbe; Button pressed
bekommt zusätzlich einen 2-px-Rahmen in Vordergrundfarbe.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 ApiCore-Frontend/src/components/form/choice-group.tsx | 6 ++++--
 ApiCore-Frontend/src/components/ui/button.tsx         | 8 +++++++-
 ApiCore-Frontend/src/components/ui/ui-sizes.spec.tsx  | 3 +++
 3 files changed, 14 insertions(+), 3 deletions(-)

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<ChoiceAppearance, string> = {
   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<T extends ChoiceValue>({
           ) : null}
         </span>
       ) : (
-        <span>{label}</span>
+        // A long label („Nicht geprüft“ in three columns on a phone) wraps
+        // instead of running into the frame.
+        <span className="min-w-0 text-balance text-center leading-tight">{label}</span>
       )}
     </>
   );
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({
     <ButtonPrimitive
       data-slot="button"
       aria-pressed={pressed}
-      className={cn(buttonVariants({ variant, size, className }))}
+      // Pressed is shown by a 2 px ink frame too, not by the fill colour alone
+      // (spec 10.7); a caller's own classes still win.
+      className={cn(
+        buttonVariants({ variant, size }),
+        pressed && "border-2 border-foreground",
+        className,
+      )}
       {...props}
     />
   )
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)", () => {
       </Button>,
     );
     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(
       <Button pressed={false} aria-label="Fett">
         B
       </Button>,
     );
     expect(screen.getByRole("button", { name: "Fett" })).toHaveAttribute("aria-pressed", "false");
+    expect(screen.getByRole("button", { name: "Fett" })).not.toHaveClass("border-2");
     rerender(<Button aria-label="Fett">B</Button>);
     expect(screen.getByRole("button", { name: "Fett" })).not.toHaveAttribute("aria-pressed");
   });