From 43a07fe28e4ddcda641d3ca51938610acce92517 Mon Sep 17 00:00:00 2001
From: Sure <127877795+Sure-Will@users.noreply.github.com>
Date: Fri, 4 Sep 2026 10:30:41 +0800
Subject: [PATCH] fix: align sidebar footer actions (#1288)

* fix: align sidebar footer actions

* test: cover sidebar footer spacing

* test: guard theme icon sizing

---------

Co-authored-by: Luis Novo <lfnovo@gmail.com>
---
 frontend/src/components/common/ThemeToggle.tsx  | 12 ++++++------
 .../src/components/layout/AppSidebar.test.tsx   | 17 +++++++++++++++++
 frontend/src/components/layout/AppSidebar.tsx   |  2 +-
 3 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/common/ThemeToggle.tsx b/frontend/src/components/common/ThemeToggle.tsx
index bd602409..b8ae28b6 100644
--- a/frontend/src/components/common/ThemeToggle.tsx
+++ b/frontend/src/components/common/ThemeToggle.tsx
@@ -25,12 +25,12 @@ export function ThemeToggle({ iconOnly = false }: ThemeToggleProps) {
         <Button 
           variant={iconOnly ? "ghost" : "outline"} 
           size={iconOnly ? "icon" : "default"} 
-          className={iconOnly ? "h-9 w-full sidebar-menu-item" : "w-full justify-start gap-2 sidebar-menu-item"}
+          className={iconOnly ? "h-9 w-full sidebar-menu-item" : "w-full justify-start gap-2 px-3 sidebar-menu-item"}
         >
-          <div className="relative h-[1.2rem] w-[1.2rem]">
-            <Sun className="absolute inset-0 h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-            <Moon className="absolute inset-0 h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
-          </div>
+          <span className="relative size-4">
+            <Sun className="absolute inset-0 size-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+            <Moon className="absolute inset-0 size-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          </span>
           {!iconOnly && <span>{t('common.theme')}</span>}
           <span className="sr-only">{t('navigation.theme')}</span>
         </Button>
@@ -60,4 +60,4 @@ export function ThemeToggle({ iconOnly = false }: ThemeToggleProps) {
       </DropdownMenuContent>
     </DropdownMenu>
   )
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/layout/AppSidebar.test.tsx b/frontend/src/components/layout/AppSidebar.test.tsx
index 67621f87..bd676534 100644
--- a/frontend/src/components/layout/AppSidebar.test.tsx
+++ b/frontend/src/components/layout/AppSidebar.test.tsx
@@ -22,6 +22,23 @@ describe('AppSidebar', () => {
     expect(screen.getByText('navigation.notebooks')).toBeDefined()
   })
 
+  it('uses consistent spacing for expanded footer actions', () => {
+    render(<AppSidebar />)
+
+    const themeButton = screen.getByText('common.theme').closest('button')
+    const languageButton = screen.getByText('common.language').closest('button')
+    const signOutButton = screen.getByRole('button', { name: 'common.signOut' })
+
+    expect(themeButton?.className.split(/\s+/)).toContain('px-3')
+
+    for (const button of [themeButton, languageButton, signOutButton]) {
+      expect(button?.className.split(/\s+/)).toContain('gap-2')
+    }
+
+    expect(themeButton?.querySelector(':scope > span.relative.size-4')).not.toBeNull()
+    expect(signOutButton.className.split(/\s+/)).not.toContain('gap-3')
+  })
+
   it('toggles collapse state when clicking handle', () => {
     const toggleCollapse = vi.fn()
     vi.mocked(useSidebarStore).mockReturnValue({
diff --git a/frontend/src/components/layout/AppSidebar.tsx b/frontend/src/components/layout/AppSidebar.tsx
index cf188f74..7ad5dd7e 100644
--- a/frontend/src/components/layout/AppSidebar.tsx
+++ b/frontend/src/components/layout/AppSidebar.tsx
@@ -371,7 +371,7 @@ export function AppSidebar() {
           ) : (
             <Button
               variant="outline"
-              className="w-full justify-start gap-3 sidebar-menu-item"
+              className="w-full justify-start gap-2 sidebar-menu-item"
               onClick={logout}
               aria-label={t('common.signOut')}
              >