From 52936245e1ad1d80707edca423bfa1247854e62e Mon Sep 17 00:00:00 2001
From: patrick <patrick@perlbach24.de>
Date: Mon, 7 Sep 2026 13:57:34 +0200
Subject: [PATCH] fix(dashboard): Grid kollabierte auf Content-Breite,
 Kachel-Titel liefen ab
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Root Cause (Screenshot-Analyse): .page-wide hatte kein width:100%/flex:1 wie .page - als Flex-Kind von .app-shell schrumpfte es auf reine Content-Breite. react-grid-layout positioniert Kacheln absolut (kein Beitrag zur intrinsischen Breite), dadurch kollabierte der ganze Grid-Container auf ~380px statt volle verfügbare Breite - Kacheln dadurch winzig, Text lief mitten im Wort ab. Fix: .page-wide bekommt flex:1/width:100%. Zusätzlich CardHeader/CardTitle mit min-w-0/truncate gegen abgeschnittene Titel, Einsatzbereitschaft-Vierer-Zeile von sm:grid-cols-4 (reagiert auf Viewport-, nicht Kachel-Breite) auf festes grid-cols-2 - lief in schmalen Kacheln trotz breitem Viewport ineinander.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01CVgbozhYmuEhiEJHffRXCV
---
 DEVLOG.md                                     | 42 +++++++++++++++++++
 frontend/src/components/ui/card.tsx           |  8 +++-
 .../tiles/EinsatzbereitschaftTile.tsx         |  2 +-
 frontend/src/styles/global.css                |  2 +
 4 files changed, 51 insertions(+), 3 deletions(-)

diff --git a/DEVLOG.md b/DEVLOG.md
index 9edb2ad..601ac4a 100644
--- a/DEVLOG.md
+++ b/DEVLOG.md
@@ -6602,3 +6602,45 @@ Keine Commits in dieser Session.
 - frontend/src/pages/dashboard/layout.ts         |  74 +++++++++++++++++++++++++++++++++------------------------------------
 
 ---
+## 2026-09-07 13:49 – 13:53 (3m)
+**Beschreibung:** Claude Code Session
+**Projekt:** asb-material
+
+### Commits
+- a2a44fb style(dashboard): Kacheln modernisiert - Karten, Einsatzbereitschaft-Balken, Termin-Listen, Skeleton
+
+### Geänderte Dateien
+- DEVLOG.md                                                      | 16 ++++++++++++++++
+- frontend/src/components/status/FristBadge.tsx                  | 18 ++++++++++--------
+- frontend/src/components/status/InspectionStatus.tsx            |  4 ++--
+- frontend/src/components/status/InventoryStatus.tsx             |  4 ++--
+- frontend/src/components/ui/card.tsx                            | 10 +++++++++-
+- frontend/src/pages/dashboard/DashboardPage.tsx                 |  8 +++++++-
+- frontend/src/pages/dashboard/tiles/AblaufdatenTile.tsx         | 48 +++++++++++++++++++++++++++++++++++-------------
+- frontend/src/pages/dashboard/tiles/EinsatzbereitschaftTile.tsx | 70 ++++++++++++++++++++++++++++++++++++++++++++++++++--------------------
+- frontend/src/pages/dashboard/tiles/PrueftermineTile.tsx        | 48 +++++++++++++++++++++++++++++++++++-------------
+- frontend/src/pages/dashboard/tiles/QualifikationTile.tsx       | 45 +++++++++++++++++++++++++++++++--------------
+- frontend/src/styles/global.css                                 |  7 +++++++
+
+---
+## 2026-09-07 13:54 – 13:54 (0m)
+**Beschreibung:** Claude Code Session
+**Projekt:** asb-material
+
+### Commits
+Keine Commits in dieser Session.
+
+### Geänderte Dateien
+- DEVLOG.md                                                      | 16 ++++++++++++++++
+- frontend/src/components/status/FristBadge.tsx                  | 18 ++++++++++--------
+- frontend/src/components/status/InspectionStatus.tsx            |  4 ++--
+- frontend/src/components/status/InventoryStatus.tsx             |  4 ++--
+- frontend/src/components/ui/card.tsx                            | 10 +++++++++-
+- frontend/src/pages/dashboard/DashboardPage.tsx                 |  8 +++++++-
+- frontend/src/pages/dashboard/tiles/AblaufdatenTile.tsx         | 48 +++++++++++++++++++++++++++++++++++-------------
+- frontend/src/pages/dashboard/tiles/EinsatzbereitschaftTile.tsx | 70 ++++++++++++++++++++++++++++++++++++++++++++++++++--------------------
+- frontend/src/pages/dashboard/tiles/PrueftermineTile.tsx        | 48 +++++++++++++++++++++++++++++++++++-------------
+- frontend/src/pages/dashboard/tiles/QualifikationTile.tsx       | 45 +++++++++++++++++++++++++++++++--------------
+- frontend/src/styles/global.css                                 |  7 +++++++
+
+---
diff --git a/frontend/src/components/ui/card.tsx b/frontend/src/components/ui/card.tsx
index 943055d..c2bd735 100644
--- a/frontend/src/components/ui/card.tsx
+++ b/frontend/src/components/ui/card.tsx
@@ -20,13 +20,17 @@ export const Card = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>((
 Card.displayName = "Card";
 
 export const CardHeader = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("flex items-center justify-between gap-2 px-5 pt-4 pb-2", className)} {...props} />
+  <div ref={ref} className={cn("flex min-w-0 items-center justify-between gap-2 px-5 pt-4 pb-2", className)} {...props} />
 ));
 CardHeader.displayName = "CardHeader";
 
 export const CardTitle = forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
   ({ className, ...props }, ref) => (
-    <h3 ref={ref} className={cn("text-sm font-semibold tracking-wide text-muted-foreground uppercase", className)} {...props} />
+    <h3
+      ref={ref}
+      className={cn("min-w-0 truncate text-sm font-semibold tracking-wide text-muted-foreground uppercase", className)}
+      {...props}
+    />
   )
 );
 CardTitle.displayName = "CardTitle";
diff --git a/frontend/src/pages/dashboard/tiles/EinsatzbereitschaftTile.tsx b/frontend/src/pages/dashboard/tiles/EinsatzbereitschaftTile.tsx
index bd6c34d..269f48c 100644
--- a/frontend/src/pages/dashboard/tiles/EinsatzbereitschaftTile.tsx
+++ b/frontend/src/pages/dashboard/tiles/EinsatzbereitschaftTile.tsx
@@ -55,7 +55,7 @@ function EinsatzbereitschaftTileKomponente({ bereitschaft }: Props) {
         )}
       </div>
 
-      <div className="mt-3 grid grid-cols-2 gap-x-3 gap-y-1.5 sm:grid-cols-4">
+      <div className="mt-3 grid grid-cols-2 gap-x-3 gap-y-1.5">
         {segmente.map((s) => (
           <div key={s.label} className="flex items-center gap-1.5 text-sm">
             <span className="h-2 w-2 shrink-0 rounded-full" style={{ backgroundColor: s.farbVar }} />
diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css
index ac28cd7..690674f 100644
--- a/frontend/src/styles/global.css
+++ b/frontend/src/styles/global.css
@@ -249,6 +249,8 @@ a {
    ausgerichtet statt zentriert - bei 1200px sonst viel verschenkter Platz
    rechts/links auf breiten Monitoren. */
 .page-wide {
+  flex: 1;
+  width: 100%;
   max-width: 1240px;
   margin: 0;
   padding: 1.75rem 2rem 3rem;