From 34149ff633343b2b44420d39faef5e5894e5fb36 Mon Sep 17 00:00:00 2001
From: Scarriffle <admin@scarriffle.com>
Date: Mon, 27 Jul 2026 14:01:37 +0200
Subject: [PATCH] Dashboard nutzt die volle Breite (Lesebreiten-Cap nur fuer
 andere Seiten)

Die .content-Spalte war global auf max-width 1400px gedeckelt - gut fuer Tabellen/Formulare, aber das Dashboard-Raster klebte dadurch auf breiten Bildschirmen links mit viel Leerraum. Die Dashboard-Routen bekommen jetzt .content--wide (max-width: none), sodass das Raster (react-grid-layout, WidthProvider) die ganze Breite ausmisst und fuellt. Andere Seiten bleiben auf Lesebreite.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 web/src/App.jsx    | 9 +++++----
 web/src/styles.css | 2 ++
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/web/src/App.jsx b/web/src/App.jsx
index fa6a7d5..0c1046e 100644
--- a/web/src/App.jsx
+++ b/web/src/App.jsx
@@ -108,7 +108,7 @@ function Sidebar() {
   );
 }
 
-function Protected({ children, adminOnly = false }) {
+function Protected({ children, adminOnly = false, wide = false }) {
   const { user, isAdmin, loading } = useAuth();
   if (loading) return <div className="center muted" style={{ padding: 60 }}>Lädt…</div>;
   if (!user) return <Navigate to="/login" replace />;
@@ -117,7 +117,8 @@ function Protected({ children, adminOnly = false }) {
     <div className="app-shell">
       <Sidebar />
       <div className="main">
-        <div className="content">{children}</div>
+        {/* `wide` hebt die Lesebreite auf – nur fürs Dashboard-Raster sinnvoll. */}
+        <div className={wide ? "content content--wide" : "content"}>{children}</div>
       </div>
     </div>
   );
@@ -132,8 +133,8 @@ export default function App() {
         path="/login"
         element={loading ? null : user ? <Navigate to="/" replace /> : <Login />}
       />
-      <Route path="/" element={<Protected><Dashboard /></Protected>} />
-      <Route path="/d/:id" element={<Protected><Dashboard /></Protected>} />
+      <Route path="/" element={<Protected wide><Dashboard /></Protected>} />
+      <Route path="/d/:id" element={<Protected wide><Dashboard /></Protected>} />
       <Route path="/checkin" element={<Protected><CheckIn /></Protected>} />
       <Route path="/checkout" element={<Protected><CheckOut /></Protected>} />
       <Route path="/products" element={<Protected><Products /></Protected>} />
diff --git a/web/src/styles.css b/web/src/styles.css
index 98382c5..1e5098f 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -129,6 +129,8 @@ h2 { font-size: 0.95rem; font-weight: 650; margin: 0 0 var(--sp-3); letter-spaci
 
 .main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
 .content { width: 100%; max-width: 1400px; margin: 0 auto; padding: var(--sp-6) var(--sp-5) 64px; }
+/* Das Dashboard-Raster soll die volle Breite nutzen, nicht auf Lesebreite kappen. */
+.content--wide { max-width: none; }
 
 .page-head {
   display: flex; align-items: center; justify-content: space-between;