From 342e3705e8f0a8c9e9a089805b22906659dd30e6 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 18 Mar 2026 22:27:53 +0100
Subject: [PATCH] fix: stack sidebar utility icons vertically

Horizontal row didn't fit in 64px collapsed sidebar. Stack theme,
notifications, and profile icons vertically like nav items.
---
 components/dashboard/Sidebar.tsx | 36 +++++++++++++++++++-------------
 1 file changed, 21 insertions(+), 15 deletions(-)

diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index e273f7f..7d75ed3 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -382,21 +382,27 @@ export default function Sidebar({
         {/* Bottom — utility items */}
         <div className="border-t border-neutral-200/60 dark:border-neutral-800/60 px-2 py-3 shrink-0">
           {/* Theme, Notifications, Profile */}
-          <div className="flex items-center justify-center gap-1 mb-1">
-            <ThemeToggle />
-            <NotificationCenter anchor="right" />
-            <UserMenu
-              auth={auth}
-              LinkComponent={Link}
-              orgs={orgs}
-              activeOrgId={auth.user?.org_id}
-              onSwitchOrganization={handleSwitchOrganization}
-              onCreateOrganization={() => router.push('/onboarding')}
-              allowPersonalOrganization={false}
-              onOpenSettings={openSettings}
-              compact
-              anchor="right"
-            />
+          <div className="flex flex-col items-center gap-0.5 mb-1">
+            <div className="flex items-center justify-center w-full rounded-lg px-2.5 py-2">
+              <ThemeToggle />
+            </div>
+            <div className="flex items-center justify-center w-full rounded-lg px-2.5 py-2">
+              <NotificationCenter anchor="right" />
+            </div>
+            <div className="flex items-center justify-center w-full rounded-lg px-2.5 py-2">
+              <UserMenu
+                auth={auth}
+                LinkComponent={Link}
+                orgs={orgs}
+                activeOrgId={auth.user?.org_id}
+                onSwitchOrganization={handleSwitchOrganization}
+                onCreateOrganization={() => router.push('/onboarding')}
+                allowPersonalOrganization={false}
+                onOpenSettings={openSettings}
+                compact
+                anchor="right"
+              />
+            </div>
           </div>
 
           {/* Settings + Collapse */}