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>
This commit is contained in:
Scarriffle
2026-07-27 14:01:37 +02:00
parent 5991a807d2
commit 34149ff633
2 changed files with 7 additions and 4 deletions

View File

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