From a588bd36d6467c3f3f39ef1c91550ace18c4948d Mon Sep 17 00:00:00 2001
From: Tom Misch <tom@Mac.fritz.box>
Date: Mon, 11 May 2026 16:09:31 +0200
Subject: [PATCH] Add admin dashboard card layout

---
 admin.html | 29 +++++++++++++++++++----------
 1 file changed, 19 insertions(+), 10 deletions(-)
diff --git a/admin.html b/admin.html
index 459cdad..0a2fb65 100644
--- a/admin.html
+++ b/admin.html
@@ -6,7 +6,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
     <link rel="stylesheet" href="/assets/css/main.min.css" />
     <style>
-        .admin-section { background: rgba(0,0,0,0.5); padding: 2em; margin-bottom: 2em; border-radius: 4px; }
+        .admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25em; align-items: start; }
+        .admin-section { background: rgba(0,0,0,0.5); padding: 1.5em; border-radius: 4px; min-width: 0; }
+        .admin-section h2 { margin-top: 0; }
+        .admin-section.wide { grid-column: 1 / -1; }
         table { width: 100%; border-collapse: collapse; }
         th, td { text-align: left; padding: 10px; border-bottom: 1px solid rgba(255,255,255,0.2); }
         .badge { display: inline-block; padding: 2px 8px; border-radius: 3px; font-size: 0.8em; }
@@ -23,6 +26,10 @@
         .folder-status.yes { color: #4CAF50; }
         .folder-status.no { color: #888; }
         #folder-table-wrap { display: none; margin-top: 1em; }
+        @media screen and (max-width: 900px) {
+            .admin-grid { grid-template-columns: 1fr; }
+            .admin-section { padding: 1.25em; }
+        }
     </style>
 </head>
 <body class="is-preload">
@@ -34,7 +41,8 @@
             </ul></nav>
         </header>
 
-        <div id="main" style="display:block; padding: 2em; max-width: 1000px; margin: 0 auto; width: 100%;">
+        <div id="main" style="display:block; padding: 2em; max-width: 1180px; margin: 0 auto; width: 100%;">
+            <div class="admin-grid">
 
             <div class="admin-section">
                 <h2>Nutzer erstellen</h2>
@@ -62,6 +70,13 @@
             </div>
 
             <div class="admin-section">
+                <h2>Website aktualisieren</h2>
+                <p>Laedt das neueste Docker-Image und startet den Website-Container neu.</p>
+                <button id="sync-site">Sync starten</button>
+                <span id="sync-status" style="margin-left:10px;"></span>
+            </div>
+
+            <div class="admin-section wide">
                 <h2>Nutzerverwaltung</h2>
                 <table>
                     <thead><tr><th>ID</th><th>Username</th><th>Rolle</th><th>Erstellt</th><th>Aktionen</th></tr></thead>
@@ -69,7 +84,7 @@
                 </table>
             </div>
 
-            <div class="admin-section">
+            <div class="admin-section wide">
                 <h2>Ordner-Zuweisung</h2>
                 <p>Waehle einen Nutzer und klicke auf Ordner um sie zuzuweisen oder zu entfernen.</p>
                 <select id="user-select">
@@ -84,13 +99,6 @@
                 </div>
             </div>
 
-            <div class="admin-section">
-                <h2>Website aktualisieren</h2>
-                <p>Laedt das neueste Docker-Image und startet den Website-Container neu.</p>
-                <button id="sync-site">Sync starten</button>
-                <span id="sync-status" style="margin-left:10px;"></span>
-            </div>
-
             <div class="admin-section">
                 <h2>Eigenes Passwort aendern</h2>
                 <form id="admin-pw-form" style="display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end;">
@@ -108,6 +116,7 @@
                 </form>
             </div>
 
+            </div>
         </div>
     </div>
     <script src="/assets/js/jquery.min.js"></script>
