From 6eecd57df4e231291c3aafa0656611056b664a2e 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:53:29 +0200
Subject: [PATCH] =?UTF-8?q?fix(t5):=20Rechte-Matrix=20nach=20Containerbrei?=
 =?UTF-8?q?te,=20=E2=80=9ENicht=20gepr=C3=BCft=E2=80=9C=20passt,=20Glas-Kn?=
 =?UTF-8?q?opf=20gedr=C3=BCckt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Browser-Prüfung A7:
- Die Rechte-Matrix im 384-px-Dialog nahm drei Spalten nach der
  Fensterbreite und schnitt Labels ab; jetzt Container-Queries.
- Dreifach-Auswahl: drei Spalten nur, wo „Nicht geprüft“ hineinpasst,
  sonst rutscht die dritte Option in die nächste Zeile.
- Gedrückter Glas-Knopf („Aufbau als Liste“) mit 2-px-Rahmen in
  holo-edge-strong statt nur Füllung.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../app/(app)/settings/users-roles/permission-matrix.tsx    | 6 ++++--
 ApiCore-Frontend/src/components/form/tri-state-field.tsx    | 4 +++-
 ApiCore-Frontend/src/components/hive/hive-glass.ts          | 2 +-
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/ApiCore-Frontend/src/app/(app)/settings/users-roles/permission-matrix.tsx b/ApiCore-Frontend/src/app/(app)/settings/users-roles/permission-matrix.tsx
index 5841f79..7642178 100644
--- a/ApiCore-Frontend/src/app/(app)/settings/users-roles/permission-matrix.tsx
+++ b/ApiCore-Frontend/src/app/(app)/settings/users-roles/permission-matrix.tsx
@@ -74,7 +74,9 @@ export function PermissionMatrix({
   }
 
   return (
-    <div className="flex flex-col gap-4 rounded-xl border border-border/60 p-3">
+    // Container queries: the matrix sits in a 384 px dialog on a wide screen,
+    // so the columns follow its own width, not the viewport.
+    <div className="@container flex flex-col gap-4 rounded-xl border border-border/60 p-3">
       {disabled ? (
         <p id={hintId} className="text-sm font-medium text-muted-foreground">
           {disabledHint}
@@ -102,7 +104,7 @@ export function PermissionMatrix({
               describedBy={describedBy}
               onCheckedChange={(checked) => toggleGroup(group.entries, checked)}
             />
-            <div className="grid grid-cols-1 gap-x-4 gap-y-1 pl-8 sm:grid-cols-2 lg:grid-cols-3">
+            <div className="grid grid-cols-1 gap-x-4 gap-y-1 pl-8 @lg:grid-cols-2 @3xl:grid-cols-3">
               {group.entries.map((entry) => (
                 <CheckboxField
                   key={entry.key}
diff --git a/ApiCore-Frontend/src/components/form/tri-state-field.tsx b/ApiCore-Frontend/src/components/form/tri-state-field.tsx
index 574df8b..040dc10 100644
--- a/ApiCore-Frontend/src/components/form/tri-state-field.tsx
+++ b/ApiCore-Frontend/src/components/form/tri-state-field.tsx
@@ -35,7 +35,9 @@ export function TriStateField({ label, value, onChange, previous }: TriStateFiel
         options={TRI_STATE_OPTIONS}
         value={value}
         onChange={onChange}
-        className="grid-cols-3"
+        // Three columns only where „Nicht geprüft“ fits (≈ 6.5rem with its
+        // mark); in a narrow form column the third option wraps below.
+        className="grid-cols-[repeat(auto-fit,minmax(6.5rem,1fr))]"
       />
       {previous ? (
         <PreviousValueHint
diff --git a/ApiCore-Frontend/src/components/hive/hive-glass.ts b/ApiCore-Frontend/src/components/hive/hive-glass.ts
index 7aafefa..93fb90b 100644
--- a/ApiCore-Frontend/src/components/hive/hive-glass.ts
+++ b/ApiCore-Frontend/src/components/hive/hive-glass.ts
@@ -7,6 +7,6 @@ const GLASS_FILL = "bg-holo-label-bg/70 text-holo-label-fg backdrop-blur-md";
 
 export const GLASS_SURFACE = `border border-white/15 shadow-[0_8px_24px_-12px_rgb(0_0_0/0.6)] ${GLASS_FILL}`;
 
-export const GLASS_BUTTON = `inline-flex h-11 shrink-0 items-center justify-center gap-1.5 rounded-xl px-3 text-sm sm:gap-2 sm:px-4 font-medium transition-colors hover:bg-holo-label-bg/90 disabled:cursor-not-allowed disabled:opacity-60 aria-pressed:border-holo-edge/70 aria-pressed:bg-holo-edge/25 [&_svg]:size-5 border border-holo-edge/35 shadow-[0_0_18px_-8px_var(--holo-edge)] ${GLASS_FILL}`;
+export const GLASS_BUTTON = `inline-flex h-11 shrink-0 items-center justify-center gap-1.5 rounded-xl px-3 text-sm sm:gap-2 sm:px-4 font-medium transition-colors hover:bg-holo-label-bg/90 disabled:cursor-not-allowed disabled:opacity-60 aria-pressed:border-2 aria-pressed:border-holo-edge-strong aria-pressed:bg-holo-edge/25 [&_svg]:size-5 border border-holo-edge/35 shadow-[0_0_18px_-8px_var(--holo-edge)] ${GLASS_FILL}`;
 
 export const GLASS_PILL = `inline-flex h-11 shrink-0 items-center gap-2 rounded-full px-4 text-sm font-medium transition-colors hover:bg-holo-label-bg/90 ${GLASS_SURFACE}`;