fix(nav): properly prevent nested style dropdown from closing hamburger menu

The issue was Radix UI's onInteractOutside behavior, not event propagation.
When clicking the nested Style dropdown, Radix detected it as an "outside"
interaction and closed the parent hamburger menu.

Solution: Add onInteractOutside handler to hamburger menu Content that
checks if the interaction is within a nested Radix popup (role="dialog"
or data-radix-popper-content-wrapper) and prevents the close.

Reverted previous stopPropagation approach as it was addressing the wrong
layer of the problem.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

apps/web/src/components/AbacusDisplayDropdown.tsx

@@ -26,7 +26,6 @@ export function AbacusDisplayDropdown({ isFullscreen = false }: AbacusDisplayDro
     <DropdownMenu.Root open={open} onOpenChange={handleOpenChange}>
       <DropdownMenu.Trigger asChild>
         <button
-          onClick={(e) => e.stopPropagation()} // Prevent parent dropdown from closing
           className={css({
             display: 'flex',
             alignItems: 'center',
@@ -76,7 +75,6 @@ export function AbacusDisplayDropdown({ isFullscreen = false }: AbacusDisplayDro
 
       <DropdownMenu.Portal>
         <DropdownMenu.Content
-          onClick={(e) => e.stopPropagation()} // Prevent clicks inside from closing parent
           className={css({
             bg: isFullscreen ? 'rgba(0, 0, 0, 0.85)' : 'white',
             rounded: 'xl',

apps/web/src/components/AppNavBar.tsx

@@ -101,6 +101,13 @@ function HamburgerMenu({
           sideOffset={8}
           onMouseEnter={handleMouseEnter}
           onMouseLeave={handleMouseLeave}
+          onInteractOutside={(e) => {
+            // Don't close the hamburger menu when clicking inside the nested style dropdown
+            const target = e.target as HTMLElement
+            if (target.closest('[role="dialog"]') || target.closest('[data-radix-popper-content-wrapper]')) {
+              e.preventDefault()
+            }
+          }}
           style={{
             background: 'linear-gradient(135deg, rgba(17, 24, 39, 0.97), rgba(31, 41, 55, 0.97))',
             backdropFilter: 'blur(12px)',