From 8d2948cdb1efdee5e28a72b65ea9b45b9a281c72 Mon Sep 17 00:00:00 2001
From: Grovy311 <christ.janssen@outlook.de>
Date: Mon, 28 Sep 2026 20:32:20 +0200
Subject: [PATCH] Match sidebar bottom layout to the Wochenplanung reference
 (theme toggle + Abmelden in one row)

Square icon-only theme toggle sits next to the Abmelden button in a shared
row, collapsing to just the toggle when the sidebar is collapsed - same
arrangement as pm-app's Sidebar.tsx.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 src/app/globals.css                     | 31 ++++++++++++++++++-------
 src/frontend/components/Sidebar.tsx     | 17 +++++++++-----
 src/frontend/components/ThemeToggle.tsx |  9 +++----
 3 files changed, 38 insertions(+), 19 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index f670173..fec2745 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -323,23 +323,24 @@ a {
 }
 
 .sidebar-footer {
-  padding: 12px;
+  padding-top: 12px;
   border-top: 1px solid rgba(255, 255, 255, 0.12);
 }
 
+/* Square and icon-only so it fits next to Abmelden in .sidebar-bottom-row. */
 .sidebar-theme-toggle {
   display: flex;
   align-items: center;
-  gap: 10px;
-  padding: 10px 14px;
+  justify-content: center;
+  flex: 0 0 auto;
+  width: 36px;
+  height: 36px;
+  padding: 0;
   border-radius: 8px;
   color: #c7d6e0;
   font-size: 0.92rem;
-  font-weight: 500;
   border: 1px solid rgba(255, 255, 255, 0.16);
   background: rgba(255, 255, 255, 0.06);
-  width: 100%;
-  text-align: left;
   cursor: pointer;
 }
 
@@ -2747,12 +2748,20 @@ button.structure-entry-main:focus-visible {
   white-space: nowrap;
 }
 
+/* Toggle (square) and Abmelden (fills the rest) share one row. */
+.sidebar-bottom-row {
+  display: flex;
+  align-items: stretch;
+  gap: 8px;
+  padding: 0 14px 12px;
+}
+
 .sidebar-logout {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 8px;
-  margin-top: 8px;
+  flex: 1 1 auto;
+  min-width: 0;
   padding: 8px 14px;
   border-radius: 8px;
   color: #c7d6e0;
@@ -2760,7 +2769,6 @@ button.structure-entry-main:focus-visible {
   font-weight: 500;
   border: 1px solid rgba(255, 255, 255, 0.16);
   background: transparent;
-  width: 100%;
   cursor: pointer;
 }
 
@@ -2773,6 +2781,11 @@ button.structure-entry-main:focus-visible {
   display: none;
 }
 
+.sidebar-collapsed .sidebar-bottom-row {
+  justify-content: center;
+  padding-inline: 0;
+}
+
 .login-gate-screen {
   min-height: 100vh;
   display: flex;
diff --git a/src/frontend/components/Sidebar.tsx b/src/frontend/components/Sidebar.tsx
index bb8aecd..5130d5d 100644
--- a/src/frontend/components/Sidebar.tsx
+++ b/src/frontend/components/Sidebar.tsx
@@ -200,12 +200,17 @@ export function Sidebar({ isCollapsed, onToggleCollapsed }: SidebarProps) {
             <span className="sidebar-identity-name">{user.name}</span>
           </div>
         )}
-        <ThemeToggle />
-        {user && (
-          <button type="button" className="sidebar-logout" onClick={() => void logout()}>
-            {isCollapsed ? "⏻" : "Abmelden"}
-          </button>
-        )}
+        {/* Toggle and Abmelden share one row: the toggle stays a fixed-size
+            square, Abmelden takes the rest of the width. Collapsed, only
+            the square toggle remains (centered). */}
+        <div className="sidebar-bottom-row">
+          <ThemeToggle />
+          {user && !isCollapsed && (
+            <button type="button" className="sidebar-logout" onClick={() => void logout()}>
+              Abmelden
+            </button>
+          )}
+        </div>
       </div>
     </aside>
   );
diff --git a/src/frontend/components/ThemeToggle.tsx b/src/frontend/components/ThemeToggle.tsx
index 355e0e2..2073a5e 100644
--- a/src/frontend/components/ThemeToggle.tsx
+++ b/src/frontend/components/ThemeToggle.tsx
@@ -48,16 +48,17 @@ export function ThemeToggle() {
   }
 
   return (
+    // Square, icon-only: it shares a row with the Abmelden button, so there
+    // is no room for a text label. The label moves to title/aria-label.
     <button
       aria-pressed={theme === "dark"}
       className="sidebar-theme-toggle"
       onClick={toggleTheme}
+      title={theme === "dark" ? "Hellmodus" : "Dunkelmodus"}
+      aria-label={theme === "dark" ? "Hellmodus einschalten" : "Dunkelmodus einschalten"}
       type="button"
     >
-      <span className="sidebar-icon" aria-hidden="true">
-        {theme === "dark" ? "☀" : "☾"}
-      </span>
-      {theme === "dark" ? "Hellmodus" : "Dunkelmodus"}
+      <span aria-hidden="true">{theme === "dark" ? "☀" : "☾"}</span>
     </button>
   );
 }