From 6db571f5ce5dfe0a0feb70f533c867a254d82450 Mon Sep 17 00:00:00 2001
From: patrick <patrick@perlbach24.de>
Date: Mon, 7 Sep 2026 14:07:19 +0200
Subject: [PATCH] fix(dashboard): Resize-Griff war unsichtbar -
 children-Injection landete in falscher Ebene
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

react-grid-layout/react-resizable hängt den Resize-Griff per children-Injection an (cloneElement(child, {}, ...child.props.children, handle)) - erwartet einen DIREKTEN Kindknoten der Grid-Item-Wurzel (CSS ".react-grid-item > .react-resizable-handle"). TileFrame rendere "children" bisher nur verschachtelt in CardContent, die CSS-Regel griff dort nicht - Griff blieb unsichtbar/nicht greifbar. Fix: eigener Kachel-Inhalt läuft jetzt über eine separate "inhalt"-Prop, "children" (das react-grid-layout für den Griff nutzt) wird direkt unter Card gerendert.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01CVgbozhYmuEhiEJHffRXCV
---
 DEVLOG.md                                      | 14 ++++++++++++++
 frontend/DEVLOG.md                             | 14 ++++++++++++++
 frontend/src/pages/dashboard/DashboardPage.tsx |  5 ++---
 frontend/src/pages/dashboard/TileFrame.tsx     | 13 ++++++++++---
 4 files changed, 40 insertions(+), 6 deletions(-)

diff --git a/DEVLOG.md b/DEVLOG.md
index 601ac4a..c891b1c 100644
--- a/DEVLOG.md
+++ b/DEVLOG.md
@@ -6644,3 +6644,17 @@ Keine Commits in dieser Session.
 - frontend/src/styles/global.css                                 |  7 +++++++
 
 ---
+## 2026-09-07 13:55 – 13:58 (2m)
+**Beschreibung:** Claude Code Session
+**Projekt:** asb-material
+
+### Commits
+- 5293624 fix(dashboard): Grid kollabierte auf Content-Breite, Kachel-Titel liefen ab
+
+### Geänderte Dateien
+- DEVLOG.md                                                      | 42 ++++++++++++++++++++++++++++++++++++++++++
+- frontend/src/components/ui/card.tsx                            |  8 ++++++--
+- frontend/src/pages/dashboard/tiles/EinsatzbereitschaftTile.tsx |  2 +-
+- frontend/src/styles/global.css                                 |  2 ++
+
+---
diff --git a/frontend/DEVLOG.md b/frontend/DEVLOG.md
index da87e38..c3a20e7 100644
--- a/frontend/DEVLOG.md
+++ b/frontend/DEVLOG.md
@@ -613,3 +613,17 @@ Keine Commits in dieser Session.
 - frontend/src/settings/startseite.ts                            |   30 -
 
 ---
+## 2026-09-07 13:59 – 14:02 (3m)
+**Beschreibung:** Claude Code Session
+**Projekt:** asb-material
+
+### Commits
+Keine Commits in dieser Session.
+
+### Geänderte Dateien
+- DEVLOG.md                                                      | 42 ++++++++++++++++++++++++++++++++++++++++++
+- frontend/src/components/ui/card.tsx                            |  8 ++++++--
+- frontend/src/pages/dashboard/tiles/EinsatzbereitschaftTile.tsx |  2 +-
+- frontend/src/styles/global.css                                 |  2 ++
+
+---
diff --git a/frontend/src/pages/dashboard/DashboardPage.tsx b/frontend/src/pages/dashboard/DashboardPage.tsx
index 486109c..34f4b0d 100644
--- a/frontend/src/pages/dashboard/DashboardPage.tsx
+++ b/frontend/src/pages/dashboard/DashboardPage.tsx
@@ -297,9 +297,8 @@ export function DashboardPage() {
                   bearbeitenAktiv={bearbeitenModus}
                   ausgeblendet={ausgeblendet}
                   onAusblendenUmschalten={() => ausblendenUmschalten(id)}
-                >
-                  {inhalt}
-                </TileFrame>
+                  inhalt={inhalt}
+                />
               );
             })}
           </GridLayout>
diff --git a/frontend/src/pages/dashboard/TileFrame.tsx b/frontend/src/pages/dashboard/TileFrame.tsx
index 95ea779..84d03df 100644
--- a/frontend/src/pages/dashboard/TileFrame.tsx
+++ b/frontend/src/pages/dashboard/TileFrame.tsx
@@ -18,14 +18,20 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
   bearbeitenAktiv: boolean;
   ausgeblendet: boolean;
   onAusblendenUmschalten: () => void;
-  children: ReactNode;
+  /** Eigentlicher Kachel-Inhalt. Bewusst NICHT "children" - react-grid-layout
+   * hängt seinen Resize-Griff über eine children-Injection an (siehe
+   * react-resizable), das erwartet einen DIREKTEN Kindknoten der Grid-Item-
+   * Wurzel (CSS-Regel ".react-grid-item > .react-resizable-handle"). Würde
+   * "children" hier in CardContent verschachtelt landen, träfe die Regel
+   * nicht und der Griff wäre unsichtbar/nicht greifbar. */
+  inhalt: ReactNode;
 }
 
 // forwardRef + generische DOM-Props nötig, react-grid-layout reicht Style/Events
 // (Drag/Resize-Handler) direkt an die Kachel-Wurzel durch.
 export const TileFrame = memo(
   forwardRef<HTMLDivElement, Props>(function TileFrame(
-    { title, akzent = "neutral", bearbeitenAktiv, ausgeblendet, onAusblendenUmschalten, children, className, ...rest },
+    { title, akzent = "neutral", bearbeitenAktiv, ausgeblendet, onAusblendenUmschalten, inhalt, children, className, ...rest },
     ref
   ) {
     return (
@@ -54,7 +60,8 @@ export const TileFrame = memo(
             </Button>
           )}
         </CardHeader>
-        {!ausgeblendet && <CardContent className="min-h-0 flex-1 overflow-auto">{children}</CardContent>}
+        {!ausgeblendet && <CardContent className="min-h-0 flex-1 overflow-auto">{inhalt}</CardContent>}
+        {children}
       </Card>
     );
   })