mirror of
https://github.com/coder/coder.git
synced 2026-09-23 05:43:53 +08:00
TJ
d1d4b89bd7
The descendant selector `[&_img]:size-icon-sm` in `menuItemClass` was matching the `<img>` nested inside `<Avatar>` 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 `<img>`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 `<img>`, 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) <details> <summary>Investigation notes</summary> **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 `<img>` *inside* a menu item, including the one nested inside `<AvatarPrimitive.Root>`. 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 `<img>`, 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 `<img>` already sets its own sizes explicitly: - `ProxySettingsSub` (`MobileMenu.tsx`): `<ExternalImage className="w-4 h-4" />` - `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. </details> --- _Authored by Coder Agent on behalf of @tracyjohnsonux._