fix(nav): inline language switcher in the mobile sheet (portaled dropdown was unclickable inside a dialog)

AGENTS.md

@@ -2202,6 +2202,13 @@ similar are internal endpoints/hook names, not credits — leave them.)
   added to the CSS + Tailwind font stacks — ⚠️ Outfit/Inter/Bebas/Barlow/Kanit have
   **no Japanese glyphs**, so without it Japanese falls back to a system font.
 - **Detection:** a Japanese-device browser (`ja*`) starts in `ja` (`detectLanguage`).
+- ⚠️ **`LanguageToggle` inside a Radix Sheet/Dialog must use the `inline` prop.**
+  The dropdown is a Radix `DropdownMenu` that **portals to `<body>`**, and an open
+  Sheet/Dialog sets `pointer-events: none` on `<body>` — so the portaled menu
+  inherits it and its items become **unclickable**. `LanguageToggle inline`
+  renders plain buttons (no portal) instead. The mobile nav sheet uses `inline`;
+  the header keeps the dropdown (it is not inside a dialog). Same trap applies to
+  any portaled popover/menu placed inside a dialog.
 - **Katakana/English for skate vocabulary** (spot→スポット, park→パーク, crew→クルー;
   Stash/The Lab/Nostr/Lightning/Zap/sats stay English). Trick names stay English.
 - **Castellano term change (2026-10-07):** crew is **"peña"** in `es.ts`, not

src/components/LanguageToggle.tsx

@@ -26,6 +26,12 @@ const languages: LanguageOption[] = [
 interface LanguageToggleProps {
   /** Show only the flag icon (compact mode) */
   compact?: boolean;
+  /**
+   * Render the languages as an inline list instead of a dropdown. Use this
+   * INSIDE a Radix Sheet/Dialog: a portaled DropdownMenu inherits the dialog's
+   * `pointer-events: none` on <body> and its items become unclickable.
+   */
+  inline?: boolean;
   /** Additional class names */
   className?: string;
   /** Variant style */
@@ -35,11 +41,40 @@ interface LanguageToggleProps {
 /**
  * Language toggle dropdown for switching between English and Spanish
  */
-export function LanguageToggle({ compact = false, className, variant = 'ghost' }: LanguageToggleProps) {
+export function LanguageToggle({ compact = false, inline = false, className, variant = 'ghost' }: LanguageToggleProps) {
   const { language, setLanguage } = useTranslation();
 
   const currentLanguage = languages.find(l => l.code === language) || languages[0];
 
+  if (inline) {
+    return (
+      <div className={cn('flex flex-col', className)}>
+        {languages.map((lang) => (
+          <button
+            key={lang.code}
+            type="button"
+            onClick={() => setLanguage(lang.code)}
+            className={cn(
+              'flex items-center gap-3 rounded-xl px-4 py-3 text-left transition-all duration-200',
+              language === lang.code
+                ? 'bg-primary/10 text-primary'
+                : 'text-muted-foreground hover:bg-muted hover:text-foreground'
+            )}
+          >
+            <span className="text-lg">{lang.flag}</span>
+            <div className="flex flex-col">
+              <span className="font-medium">{lang.nativeName}</span>
+              {lang.nativeName !== lang.name && (
+                <span className="text-xs opacity-70">{lang.name}</span>
+              )}
+            </div>
+            {language === lang.code && <span className="ml-auto text-primary">✓</span>}
+          </button>
+        ))}
+      </div>
+    );
+  }
+
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>

src/components/Layout.tsx

@@ -982,9 +982,10 @@ export function Layout({ children, noPadding }: LayoutProps) {
                       <span className="font-medium">{t('chromeUi.customizeNavBar')}</span>
                     </button>
                   </div>
-                  {/* Language Toggle in Mobile Menu */}
+                  {/* Language Toggle in Mobile Menu — inline (a portaled dropdown
+                      is unclickable inside a Radix Sheet) */}
                   <div className="py-3 border-t">
-                    <LanguageToggle className="w-full justify-start" variant="ghost" />
+                    <LanguageToggle inline className="w-full" variant="ghost" />
                   </div>
                   {/* Login/Logout Section */}
                   <div className="pt-4 border-t space-y-3">