Fix mobile locale select under drawer

Select menus portal at z-3 while drawers sit at z-5, so
the popup opened behind the drawer. Portal into the drawer
panel instead. Point .env.example VITE_API_URL at the slug
subdomain with a local Vite note.

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

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

@@ -23,6 +23,7 @@ import { Select } from "@probo/ui/src/v2/Select/Select";
 import { SelectItem } from "@probo/ui/src/v2/Select/SelectItem";
 import { SelectPopup } from "@probo/ui/src/v2/Select/SelectPopup";
 import { SelectTrigger } from "@probo/ui/src/v2/Select/SelectTrigger";
+import type { RefObject } from "react";
 import { useTranslation } from "react-i18next";
 
 import {
@@ -38,6 +39,9 @@ interface LocaleSelectProps {
   persist?: boolean;
   // 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).
+  portalContainer?: RefObject<HTMLElement | null>;
 }
 
 // Compact locale control for the top bar (guest and mobile). Uses the v2 Select
@@ -45,6 +49,7 @@ interface LocaleSelectProps {
 export function LocaleSelect({
   persist = false,
   onLocaleChange,
+  portalContainer,
 }: LocaleSelectProps) {
   const { t } = useTranslation();
   const locale = useLocale();
@@ -75,7 +80,7 @@ export function LocaleSelect({
           </span>
         )}
       </SelectTrigger>
-      <SelectPopup>
+      <SelectPopup container={portalContainer}>
         {URL_LOCALES.map(code => (
           <SelectItem key={code} value={code}>
             {URL_LOCALE_LABELS[code]}

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

@@ -38,7 +38,7 @@ import { DrawerTitle } from "@probo/ui/src/v2/Drawer/DrawerTitle";
 import { DrawerTrigger } from "@probo/ui/src/v2/Drawer/DrawerTrigger";
 import { IconButton } from "@probo/ui/src/v2/IconButton/IconButton";
 import { Text } from "@probo/ui/src/v2/typography/Text";
-import { useState } from "react";
+import { useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { graphql, useFragment } from "react-relay";
 import { useLocation } from "react-router";
@@ -76,6 +76,9 @@ export function TopBarMobileNav({ identityKey }: TopBarMobileNavProps) {
   const { openSubscribe, isSubscribed, unsubscribe, isUnsubscribing } = useSubscribeDialog();
   const [signOut, isSigningOut] = useSignOut();
   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);
   const identity = useFragment(topBarMobileNavFragment, identityKey);
   const localizedPath = useLocalizedPath();
 
@@ -103,7 +106,7 @@ export function TopBarMobileNav({ identityKey }: TopBarMobileNavProps) {
           )}
         />
       </div>
-      <DrawerPopup side="right">
+      <DrawerPopup side="right" ref={drawerPopupRef}>
         <DrawerHeader>
           <DrawerTitle>{t("topBar.menuTitle")}</DrawerTitle>
           <DrawerClose
@@ -147,6 +150,7 @@ export function TopBarMobileNav({ identityKey }: TopBarMobileNavProps) {
             <LocaleSelect
               persist={identity != null}
               onLocaleChange={close}
+              portalContainer={drawerPopupRef}
             />
           </div>
           {identity == null