From bea45b9d2bb28135639deaa5f50bb3a3b2b15ad8 Mon Sep 17 00:00:00 2001
From: Kerim Atilgan <kerim@familie-atilgan.de>
Date: Fri, 15 May 2026 16:53:07 +0200
Subject: [PATCH] Move admin nav to a left sidebar; shrink table buttons; keep
 action buttons on one line
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Wrap the Administration tab in a 260px sidebar + main grid. The
  category buttons stack vertically inside the sidebar and stay
  sticky while the content area scrolls. Below 900px viewports
  the sidebar collapses back to a horizontal row.
- Compact button defaults for anything inside a table cell
  (table button / td button) override the global 12px/24px padding
  with 5px/10px and a smaller font. Marks every last-child <td> as
  nowrap so the Bearbeiten/Löschen pair (and similar action sets)
  stays on a single line instead of wrapping vertically.
- Adjacent action buttons get a 5px gap via "button + button"
  without touching the existing inline margin-right declarations.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 public/index.html | 174 +++++++++++++++++++++++++++++-----------------
 1 file changed, 112 insertions(+), 62 deletions(-)

diff --git a/public/index.html b/public/index.html
index 357bdb7..e2c370e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -166,51 +166,60 @@
             color: #2c3e50;
         }
 
-        /* New Admin Interface Styles */
-        .admin-nav {
+        /* New Admin Interface Styles: sidebar + content */
+        .admin-layout {
+            display: grid;
+            grid-template-columns: 260px 1fr;
+            gap: 20px;
+            align-items: start;
+        }
+
+        .admin-sidebar {
             background: white;
             padding: 20px;
             border-radius: 8px;
-            margin-bottom: 20px;
-            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+            box-shadow: 0 2px 10px rgba(0,0,0,0.08);
+            position: sticky;
+            top: 20px;
         }
 
-        .admin-nav h2 {
-            margin: 0 0 20px 0;
+        .admin-sidebar h2 {
+            margin: 0 0 16px 0;
             color: #2c3e50;
-            text-align: center;
+            text-align: left;
+            font-size: 18px;
+        }
+
+        .admin-main {
+            min-width: 0;
         }
 
         .admin-categories {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-            gap: 15px;
-            max-width: 800px;
-            margin: 0 auto;
+            display: flex;
+            flex-direction: column;
+            gap: 6px;
         }
 
         .admin-cat-btn {
             display: flex;
-            flex-direction: column;
             align-items: center;
-            gap: 8px;
-            padding: 20px;
+            gap: 10px;
+            padding: 10px 14px;
             background: #ffffff;
-            border: 2px solid #dee2e6;
-            border-radius: 12px;
+            border: 1px solid #dee2e6;
+            border-radius: 8px;
             cursor: pointer;
-            transition: all 0.3s ease;
-            text-align: center;
+            transition: all 0.15s ease;
+            text-align: left;
             font-size: 14px;
-            font-weight: 600;
+            font-weight: 500;
             color: #2c3e50;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+            width: 100%;
         }
 
         .admin-cat-btn:hover {
             background: #e3f2fd;
             border-color: #2196f3;
-            transform: translateY(-2px);
         }
 
         .admin-cat-btn.active {
@@ -220,8 +229,43 @@
         }
 
         .admin-icon {
-            font-size: 24px;
-            display: block;
+            font-size: 18px;
+            line-height: 1;
+        }
+
+        @media (max-width: 900px) {
+            .admin-layout {
+                grid-template-columns: 1fr;
+            }
+            .admin-sidebar {
+                position: static;
+            }
+            .admin-categories {
+                flex-direction: row;
+                flex-wrap: wrap;
+            }
+            .admin-cat-btn {
+                width: auto;
+            }
+        }
+
+        /* Compact buttons for tables and action cells */
+        table button,
+        td button,
+        .btn-sm {
+            padding: 5px 10px !important;
+            font-size: 13px !important;
+            border-radius: 4px !important;
+        }
+
+        td.actions, .action-cell, table th:last-child, table td:last-child {
+            white-space: nowrap;
+        }
+
+        table button + button,
+        td button + button,
+        .btn-row button + button {
+            margin-left: 5px;
         }
 
         .admin-category {
@@ -1175,44 +1219,48 @@
         
         <!-- Administration Tab -->
         <div id="admin" class="tab-content">
-            <!-- Admin Navigation -->
-            <div class="admin-nav">
-                <h2>Administration</h2>
-                <div class="admin-categories">
-                    <button class="admin-cat-btn active" onclick="showAdminCategory('anbieter')">
-                        <span class="admin-icon">🏢</span>
-                        <span>Anbieter</span>
-                    </button>
-                    <button class="admin-cat-btn" onclick="showAdminCategory('vos')">
-                        <span class="admin-icon">🔢</span>
-                        <span>VOs (Vertriebspartner)</span>
-                    </button>
-                    <button class="admin-cat-btn" onclick="showAdminCategory('tarife')">
-                        <span class="admin-icon">📋</span>
-                        <span>Tarife</span>
-                    </button>
-                    <button class="admin-cat-btn" onclick="showAdminCategory('tarifoptionen')">
-                        <span class="admin-icon">⚙️</span>
-                        <span>Tarifoptionen</span>
-                    </button>
-                    <button class="admin-cat-btn" onclick="showAdminCategory('mitarbeiter-prozentsaetze')">
-                        <span class="admin-icon">📊</span>
-                        <span>Mitarbeiter-Prozentsätze</span>
-                    </button>
-                    <button class="admin-cat-btn" onclick="showAdminCategory('mitarbeiter-provisionen')">
-                        <span class="admin-icon">👤</span>
-                        <span>Mitarbeiter-Provisionen</span>
-                    </button>
-                    <button class="admin-cat-btn" onclick="showAdminCategory('provisionsregeln')">
-                        <span class="admin-icon">📝</span>
-                        <span>Provisionsregeln</span>
-                    </button>
-                    <button class="admin-cat-btn" onclick="showAdminCategory('global-provisionsregeln')">
-                        <span class="admin-icon">🌐</span>
-                        <span>Globale Provisionsregeln</span>
-                    </button>
-                </div>
-            </div>
+            <div class="admin-layout">
+                <!-- Sidebar -->
+                <aside class="admin-sidebar">
+                    <h2>Administration</h2>
+                    <div class="admin-categories">
+                        <button class="admin-cat-btn active" onclick="showAdminCategory('anbieter')">
+                            <span class="admin-icon">🏢</span>
+                            <span>Anbieter</span>
+                        </button>
+                        <button class="admin-cat-btn" onclick="showAdminCategory('vos')">
+                            <span class="admin-icon">🔢</span>
+                            <span>VOs (Vertriebspartner)</span>
+                        </button>
+                        <button class="admin-cat-btn" onclick="showAdminCategory('tarife')">
+                            <span class="admin-icon">📋</span>
+                            <span>Tarife</span>
+                        </button>
+                        <button class="admin-cat-btn" onclick="showAdminCategory('tarifoptionen')">
+                            <span class="admin-icon">⚙️</span>
+                            <span>Tarifoptionen</span>
+                        </button>
+                        <button class="admin-cat-btn" onclick="showAdminCategory('mitarbeiter-prozentsaetze')">
+                            <span class="admin-icon">📊</span>
+                            <span>Mitarbeiter-Prozentsätze</span>
+                        </button>
+                        <button class="admin-cat-btn" onclick="showAdminCategory('mitarbeiter-provisionen')">
+                            <span class="admin-icon">👤</span>
+                            <span>Mitarbeiter-Provisionen</span>
+                        </button>
+                        <button class="admin-cat-btn" onclick="showAdminCategory('provisionsregeln')">
+                            <span class="admin-icon">📝</span>
+                            <span>Provisionsregeln</span>
+                        </button>
+                        <button class="admin-cat-btn" onclick="showAdminCategory('global-provisionsregeln')">
+                            <span class="admin-icon">🌐</span>
+                            <span>Globale Provisionsregeln</span>
+                        </button>
+                    </div>
+                </aside>
+
+                <!-- Content -->
+                <main class="admin-main">
 
             <!-- Anbieter Management -->
             <div id="admin-anbieter" class="admin-category active">
@@ -1502,6 +1550,8 @@
                 </div>
             </div>
 
+                </main>
+            </div>
         </div>
 
         <!-- Benutzer-Verwaltung Tab (admin only) -->