fix(site): scope menu item icon sizing to direct children (#26040)

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._

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";

site/src/modules/dashboard/Navbar/UserDropdown/UserDropdownContent.tsx

@@ -38,10 +38,7 @@ export const UserDropdownContent: FC<UserDropdownContentProps> = ({
 
 	return (
 		<>
-			<DropdownMenuItem
-				className="flex items-center gap-3 [&_img]:w-full [&_img]:h-full"
-				asChild
-			>
+			<DropdownMenuItem className="flex items-center gap-3" asChild>
 				<Link to="/settings/account">
 					<div className="flex flex-col">
 						<span className="text-content-primary">{user.username}</span>