refactor(header): align account submenu contract and tests

web/app/components/header/account-dropdown/compliance.spec.tsx

@@ -1,6 +1,7 @@
 import type { ModalContextState } from '@/context/modal-context'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '@/app/components/base/ui/dropdown-menu'
 import { Plan } from '@/app/components/billing/type'
 import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
 import { useModalContext } from '@/context/modal-context'
@@ -70,16 +71,26 @@ describe('Compliance', () => {
     )
   }
 
-  // Wrapper for tests that need the menu open
+  const renderCompliance = () => {
+    return renderWithQueryClient(
+      <DropdownMenu open={true} onOpenChange={() => {}}>
+        <DropdownMenuTrigger>open</DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <Compliance />
+        </DropdownMenuContent>
+      </DropdownMenu>,
+    )
+  }
+
   const openMenuAndRender = () => {
-    renderWithQueryClient(<Compliance />)
-    fireEvent.click(screen.getByRole('button'))
+    renderCompliance()
+    fireEvent.click(screen.getByText('common.userProfile.compliance'))
   }
 
   describe('Rendering', () => {
     it('should render compliance menu trigger', () => {
       // Act
-      renderWithQueryClient(<Compliance />)
+      renderCompliance()
 
       // Assert
       expect(screen.getByText('common.userProfile.compliance')).toBeInTheDocument()

web/app/components/header/account-dropdown/compliance.tsx

@@ -180,6 +180,7 @@ function ComplianceDocRowItem({
   )
 }
 
+// Submenu-only: this component must be rendered within an existing DropdownMenu root.
 export default function Compliance() {
   const { t } = useTranslation()
 

web/app/components/header/account-dropdown/support.tsx

@@ -43,6 +43,7 @@ function SupportExternalLinkIndicator() {
   return <span aria-hidden className={cn('i-ri-arrow-right-up-line', menuTrailingIconClassName)} />
 }
 
+// Submenu-only: this component must be rendered within an existing DropdownMenu root.
 export default function Support({ closeAccountDropdown }: SupportProps) {
   const { t } = useTranslation()
   const { plan } = useProviderContext()