diff --git a/AGENTS.md b/AGENTS.md index f3e7747..ed03164 100644 --- a/AGENTS.md +++ b/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 ``**, and an open + Sheet/Dialog sets `pointer-events: none` on `` — 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 diff --git a/src/components/LanguageToggle.tsx b/src/components/LanguageToggle.tsx index 16ebd37..ebf6ed3 100644 --- a/src/components/LanguageToggle.tsx +++ b/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 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 ( +
+ {languages.map((lang) => ( + + ))} +
+ ); + } + return ( diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx index 2dccbe0..187c037 100644 --- a/src/components/Layout.tsx +++ b/src/components/Layout.tsx @@ -982,9 +982,10 @@ export function Layout({ children, noPadding }: LayoutProps) { {t('chromeUi.customizeNavBar')} - {/* Language Toggle in Mobile Menu */} + {/* Language Toggle in Mobile Menu — inline (a portaled dropdown + is unclickable inside a Radix Sheet) */}
- +
{/* Login/Logout Section */}