mirror of
https://github.com/coder/coder.git
synced 2026-11-01 04:47:17 +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._
20 lines
973 B
TypeScript
20 lines
973 B
TypeScript
export const menuContentClass = [
|
|
"z-50 min-w-48 overflow-hidden rounded-md border border-solid bg-surface-primary p-2 text-content-secondary shadow-md",
|
|
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
|
"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
|
|
"data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
|
|
"data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
|
].join(" ");
|
|
|
|
export const menuItemClass = `
|
|
relative flex cursor-default select-none items-center gap-2 rounded-sm
|
|
px-2 py-1.5 text-sm text-content-secondary font-medium outline-none
|
|
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
|
|
`;
|
|
|
|
export const menuSeparatorClass = "-mx-1 my-2 h-px bg-border";
|