Portal drawer selects onto the viewport

The swipe Popup keeps a CSS transform that re-roots
position:fixed, so Base UI's modal inert cutout missed
the locale trigger and blocked hover and clicks.

Signed-off-by: Émile Ré <emile@probo.com>

apps/compliance-portal/src/components/TopBar/LocaleSelect.tsx

@@ -40,7 +40,8 @@ interface LocaleSelectProps {
   // Called after a locale change is requested (e.g. close the mobile drawer).
   onLocaleChange?: () => void;
   // Portal target for the menu. Required inside a Drawer/Dialog so the popup
-  // is not painted under the modal layer (Select defaults to body + z-3).
+  // stacks in the modal layer (Select defaults to body + z-3). Prefer a
+  // non-transformed container (e.g. Drawer Viewport, not the swipe Popup).
   portalContainer?: RefObject<HTMLElement | null>;
 }
 

apps/compliance-portal/src/components/TopBar/TopBarMobileNav.tsx

@@ -80,9 +80,10 @@ export function TopBarMobileNav({ identityKey }: TopBarMobileNavProps) {
   const [signOut, isSigningOut] = useSignOut();
   const { displayMode, toggleDisplayMode } = useDisplayMode();
   const [open, setOpen] = useState(false);
-  // Select menus portal to body at z-3 by default; mount them on the drawer
-  // popup so they stack inside the modal layer (z-5) instead of under it.
-  const drawerPopupRef = useRef<HTMLDivElement>(null);
+  // Select menus portal to body at z-3 by default (under the drawer at z-5).
+  // Mount them on the drawer Viewport — not the swipe Popup, which keeps a CSS
+  // transform and would break Base UI's modal inert cutout over the trigger.
+  const drawerViewportRef = useRef<HTMLDivElement>(null);
   const identity = useFragment(topBarMobileNavFragment, identityKey);
   const localizedPath = useLocalizedPath();
 
@@ -110,7 +111,7 @@ export function TopBarMobileNav({ identityKey }: TopBarMobileNavProps) {
           )}
         />
       </div>
-      <DrawerPopup side="right" ref={drawerPopupRef}>
+      <DrawerPopup side="right" ref={drawerViewportRef}>
         <DrawerHeader>
           <DrawerTitle>{t("topBar.menuTitle")}</DrawerTitle>
           <DrawerClose
@@ -154,7 +155,7 @@ export function TopBarMobileNav({ identityKey }: TopBarMobileNavProps) {
             <LocaleSelect
               persist={identity != null}
               onLocaleChange={close}
-              portalContainer={drawerPopupRef}
+              portalContainer={drawerViewportRef}
             />
           </div>
           {identity == null