Scarriffle/Vorrania
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Dashboard nutzt die volle Breite (Lesebreiten-Cap nur fuer andere Seiten)

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

9
web/src/App.jsx
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(); const { user, isAdmin, loading } = useAuth();
if (loading) return <div className="center muted" style={{ padding: 60 }}>Lädt…</div>; if (loading) return <div className="center muted" style={{ padding: 60 }}>Lädt…</div>;
if (!user) return <Navigate to="/login" replace />; if (!user) return <Navigate to="/login" replace />;
@@ -117,7 +117,8 @@ function Protected({ children, adminOnly = false }) {
<div className="app-shell"> <div className="app-shell">
<Sidebar /> <Sidebar />
<div className="main"> <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>
</div> </div>
); );
@@ -132,8 +133,8 @@ export default function App() {
path="/login" path="/login"
element={loading ? null : user ? <Navigate to="/" replace /> : <Login />} element={loading ? null : user ? <Navigate to="/" replace /> : <Login />}
/> />
<Route path="/" element={<Protected><Dashboard /></Protected>} /> <Route path="/" element={<Protected wide><Dashboard /></Protected>} />
<Route path="/d/:id" element={<Protected><Dashboard /></Protected>} /> <Route path="/d/:id" element={<Protected wide><Dashboard /></Protected>} />
<Route path="/checkin" element={<Protected><CheckIn /></Protected>} /> <Route path="/checkin" element={<Protected><CheckIn /></Protected>} />
<Route path="/checkout" element={<Protected><CheckOut /></Protected>} /> <Route path="/checkout" element={<Protected><CheckOut /></Protected>} />
<Route path="/products" element={<Protected><Products /></Protected>} /> <Route path="/products" element={<Protected><Products /></Protected>} />

2
web/src/styles.css
View File

@@ -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; } .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; } .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 { .page-head {
display: flex; align-items: center; justify-content: space-between; display: flex; align-items: center; justify-content: space-between;