fix(dashboard): Grid kollabierte auf Content-Breite, Kachel-Titel liefen ab

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

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";

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 }} />

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;