From d2489fd2c7e66b5788f8e026f7c704f0594de848 Mon Sep 17 00:00:00 2001
From: Sergey Kozyrenko <sirozha_blr@tut.by>
Date: Fri, 17 Jul 2026 11:24:25 +0700
Subject: [PATCH] fix(sidebar): restore icon sizing the container cannot supply
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The size-4 sweep stripped four icons the sweep had no right to touch, and they
rendered at lucide's default 24px: the avatar's UserIcon and the theme
switcher's Monitor/Sun/Moon in the sidebar user menu.

The sweep assumed every listed container sizes its icons at any depth. Only
Button/Toggle/CommandItem do, via [&_svg]. SidebarMenuButton and DropdownMenuItem
use [&>svg], which reaches a DIRECT child only — and these four sit deeper, inside
an AvatarFallback and inside TabsTrigger, so nothing sized them.

Found by measuring rendered icon width across every route with the menus open,
not by re-reading the selectors: the avatar icon was the only one a closed-menu
pass could see. Verified after: no icon inside a button or menu row renders over
16px except EmptyMedia's, which is meant to be large.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/src/components/layouts/main/main-sidebar.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/layouts/main/main-sidebar.tsx b/frontend/src/components/layouts/main/main-sidebar.tsx
index 4c419a0c..d917965b 100644
--- a/frontend/src/components/layouts/main/main-sidebar.tsx
+++ b/frontend/src/components/layouts/main/main-sidebar.tsx
@@ -297,7 +297,7 @@ export function MainSidebar() {
                                 >
                                     <Avatar className="bg-background dark:bg-muted size-8 rounded-lg">
                                         <AvatarFallback className="flex size-8 items-center justify-center">
-                                            <UserIcon />
+                                            <UserIcon className="size-4" />
                                         </AvatarFallback>
                                     </Avatar>
                                     <div className="grid flex-1 text-left text-sm leading-tight">
@@ -347,21 +347,21 @@ export function MainSidebar() {
                                                 className="dark:data-[state=active]:bg-card h-6 px-2"
                                                 value="system"
                                             >
-                                                <Monitor />
+                                                <Monitor className="size-4" />
                                             </TabsTrigger>
                                             <TabsTrigger
                                                 aria-label="Light theme"
                                                 className="dark:data-[state=active]:bg-card h-6 px-2"
                                                 value="light"
                                             >
-                                                <Sun />
+                                                <Sun className="size-4" />
                                             </TabsTrigger>
                                             <TabsTrigger
                                                 aria-label="Dark theme"
                                                 className="dark:data-[state=active]:bg-card h-6 px-2"
                                                 value="dark"
                                             >
-                                                <Moon />
+                                                <Moon className="size-4" />
                                             </TabsTrigger>
                                         </TabsList>
                                     </Tabs>