From d1d4b89bd757eaca4e9c00a835b02575cfb3aa4e Mon Sep 17 00:00:00 2001 From: TJ Date: Thu, 4 Jun 2026 00:22:00 -0700 Subject: [PATCH] fix(site): scope menu item icon sizing to direct children (#26040) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The descendant selector `[&_img]:size-icon-sm` in `menuItemClass` was matching the `` nested inside `` on the User settings row of the mobile menu, pinning the avatar image to `1.125rem` instead of letting it fill its Avatar container. The same descendant rule also applied to nested SVGs. Switch both rules to direct-child selectors (`[&>svg]`, `[&>img]`), matching the symmetric `shrink-0` rules already next to them and the same pattern used in `Button.tsx`. Menu items that contain nested ``s already set their own sizes explicitly (`w-4 h-4` in `ProxySettingsSub`, `!size-3.5` in `WorkspacePill`), so this only stops overriding components like `Avatar` that manage their own internal sizing. Also removes the now-dead `[&_img]:w-full [&_img]:h-full` workaround in `UserDropdownContent.tsx` that fought the same bug per-item; that menu item no longer renders an ``, and the root fix makes the workaround unnecessary anyway. Refs [CODAGT-552](https://linear.app/codercom/issue/CODAGT-552/mobile-menu-user-avatar-image-is-undersized-inside-its-container)
Investigation notes **Repro (before):** mobile viewport, user has an image avatar set, open hamburger menu, observe the avatar in the User settings row is smaller than its bordered square. **Root cause:** `site/src/components/DropdownMenu/menuClasses.ts` set `[&_img]:size-icon-sm` using a Tailwind descendant selector (`_`). That matches every `` *inside* a menu item, including the one nested inside ``. The Avatar's inner image is supposed to be `aspect-square size-full object-contain` and inherit its size from the Avatar root (`--avatar-default` ≈ 24px by default), but the descendant rule overrides that and pins it to 1.125rem. **Prior workaround:** `UserDropdownContent.tsx` previously added `[&_img]:w-full [&_img]:h-full` per-item to fight the same bug on desktop. That menu item no longer renders an ``, so the override was already dead code; removed here for hygiene. **Safety check on the wider change:** every other menu item that contains a nested `` already sets its own sizes explicitly: - `ProxySettingsSub` (`MobileMenu.tsx`): `` - `WorkspacePill.tsx`: `[&_svg]:!size-3.5 [&_img]:!size-3.5` on the menu content Direct-child icons (`ChevronRightIcon`, `CircleHelpIcon`, `XIcon`, lucide icons in `UserDropdownContent.tsx`) remain direct children of the menu item, so `[&>svg]:size-icon-sm` keeps sizing them as before.
--- _Authored by Coder Agent on behalf of @tracyjohnsonux._ --- site/src/components/DropdownMenu/menuClasses.ts | 4 ++-- .../dashboard/Navbar/UserDropdown/UserDropdownContent.tsx | 5 +---- 2 files changed, 3 insertions(+), 6 deletions(-) diff --git a/site/src/components/DropdownMenu/menuClasses.ts b/site/src/components/DropdownMenu/menuClasses.ts index f5aa7011ba..1f79efb62c 100644 --- a/site/src/components/DropdownMenu/menuClasses.ts +++ b/site/src/components/DropdownMenu/menuClasses.ts @@ -12,8 +12,8 @@ export const menuItemClass = ` no-underline focus:bg-surface-secondary focus:text-content-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50 - [&_svg]:size-icon-sm [&>svg]:shrink-0 - [&_img]:size-icon-sm [&>img]:shrink-0 + [&>svg]:size-icon-sm [&>svg]:shrink-0 + [&>img]:size-icon-sm [&>img]:shrink-0 `; export const menuSeparatorClass = "-mx-1 my-2 h-px bg-border"; diff --git a/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdownContent.tsx b/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdownContent.tsx index c4a12209ca..0b80fb6b62 100644 --- a/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdownContent.tsx +++ b/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdownContent.tsx @@ -38,10 +38,7 @@ export const UserDropdownContent: FC = ({ return ( <> - +
{user.username}