fix(sidebar): restore icon sizing the container cannot supply

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>
This commit is contained in:
Sergey Kozyrenko
2026-07-17 11:24:25 +07:00
co-authored by Claude Opus 4.8
parent 9cbda709b6
commit d2489fd2c7
@@ -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>