From 132ea4f7d016884d7e2025eddcb3bf3144be751c Mon Sep 17 00:00:00 2001
From: Ronny <ronny975@gmail.com>
Date: Sun, 12 Apr 2026 17:26:20 +0200
Subject: [PATCH] feat: desktop layout optimization

Dashboard: 2-column layout (hero left 60%, stats+nudges right 40%)
Spielplan: 2-column grid for match cards on desktop
Profile: wider max-width (900px), 6-column achievement grid
Header: Admin link back in desktop nav, max-width 1200px
All via CSS media queries (min-width: 768px), no HTML restructuring.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/src/App.module.css                 |  2 +-
 frontend/src/App.tsx                        |  3 ++
 frontend/src/pages/DashboardPage.module.css | 35 ++++++++++++++++++++-
 frontend/src/pages/DashboardPage.tsx        |  6 +++-
 frontend/src/pages/MatchesPage.module.css   | 17 +++++++++-
 frontend/src/pages/ProfilePage.module.css   |  8 ++++-
 6 files changed, 66 insertions(+), 5 deletions(-)

diff --git a/frontend/src/App.module.css b/frontend/src/App.module.css
index 0f98ae0..384b365 100644
--- a/frontend/src/App.module.css
+++ b/frontend/src/App.module.css
@@ -109,7 +109,7 @@
 
 .main {
   flex: 1;
-  max-width: 1100px;
+  max-width: 1200px;
   margin: 0 auto;
   padding: 32px 24px;
   padding-bottom: 70px;
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 24f3fbf..fcba724 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -117,6 +117,9 @@ export default function App() {
             <NavLink to="/profil" className={({ isActive }) => isActive ? styles.navLinkActive : styles.navLink}>
               Mein Profil
             </NavLink>
+            <NavLink to="/admin" className={({ isActive }) => isActive ? styles.navLinkActive : styles.navLink}>
+              Admin
+            </NavLink>
           </nav>
           <div className={styles.headerActions}>
             <button
diff --git a/frontend/src/pages/DashboardPage.module.css b/frontend/src/pages/DashboardPage.module.css
index b20a722..0926260 100644
--- a/frontend/src/pages/DashboardPage.module.css
+++ b/frontend/src/pages/DashboardPage.module.css
@@ -1,11 +1,44 @@
 .dashboard {
-  max-width: 800px;
+  max-width: 1100px;
   margin: 0 auto;
   display: flex;
   flex-direction: column;
   gap: 14px;
 }
 
+/* Mobile: single column */
+.dashboardGrid {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+/* Desktop: 2-column layout */
+@media (min-width: 768px) {
+  .dashboardGrid {
+    flex-direction: row;
+    gap: 20px;
+    align-items: flex-start;
+  }
+
+  .hero {
+    flex: 3;
+    min-width: 0;
+  }
+
+  .sidebar {
+    flex: 2;
+    position: sticky;
+    top: 80px;
+  }
+}
+
 /* ═══════════════════════════════════════
    HERO CARD — Stadium atmosphere
    ═══════════════════════════════════════ */
diff --git a/frontend/src/pages/DashboardPage.tsx b/frontend/src/pages/DashboardPage.tsx
index 5e9a866..e041fd9 100644
--- a/frontend/src/pages/DashboardPage.tsx
+++ b/frontend/src/pages/DashboardPage.tsx
@@ -68,6 +68,7 @@ export default function DashboardPage(_props: Props) {
 
   return (
     <div className={styles.dashboard}>
+      <div className={styles.dashboardGrid}>
       {/* Hero Card */}
       <div className={styles.hero} onClick={() => navigate('/spiele')}>
         {/* Radial glow background effect */}
@@ -154,7 +155,8 @@ export default function DashboardPage(_props: Props) {
         )}
       </div>
 
-      {/* Stats Row */}
+      {/* Sidebar: Stats + Nudges */}
+      <div className={styles.sidebar}>
       <div className={styles.statsRow}>
         <div className={`card ${styles.statTile}`}>
           <span className={styles.statValue}>
@@ -208,6 +210,8 @@ export default function DashboardPage(_props: Props) {
           ))}
         </div>
       )}
+      </div>{/* /sidebar */}
+      </div>{/* /dashboardGrid */}
 
       {tipMatch && (
         <TipModal
diff --git a/frontend/src/pages/MatchesPage.module.css b/frontend/src/pages/MatchesPage.module.css
index 1f24ac7..8dbe7fa 100644
--- a/frontend/src/pages/MatchesPage.module.css
+++ b/frontend/src/pages/MatchesPage.module.css
@@ -1,4 +1,10 @@
-.page { display: flex; flex-direction: column; gap: 16px; }
+.page {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  max-width: 1100px;
+  margin: 0 auto;
+}
 
 /* ── Stats Card (glassmorphism) ── */
 .statsCard {
@@ -122,6 +128,15 @@
   margin-bottom: 8px;
 }
 
+/* Desktop: 2-column grid for match cards */
+@media (min-width: 768px) {
+  .matchList {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 12px;
+  }
+}
+
 /* ── Past matches toggle ── */
 .pastToggle {
   display: flex;
diff --git a/frontend/src/pages/ProfilePage.module.css b/frontend/src/pages/ProfilePage.module.css
index a95ee49..9431461 100644
--- a/frontend/src/pages/ProfilePage.module.css
+++ b/frontend/src/pages/ProfilePage.module.css
@@ -1,5 +1,5 @@
 /* ── Layout ── */
-.page { display: flex; flex-direction: column; gap: 20px; max-width: 640px; }
+.page { display: flex; flex-direction: column; gap: 20px; max-width: 900px; }
 
 .loading { display: flex; justify-content: center; padding: 60px; }
 .spinner { width: 32px; height: 32px; border: 3px solid var(--surface-high); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.8s linear infinite; }
@@ -252,6 +252,12 @@
   gap: 8px;
 }
 
+@media (min-width: 768px) {
+  .badgeGrid {
+    grid-template-columns: repeat(6, 1fr);
+  }
+}
+
 .badge {
   display: flex;
   flex-direction: column;