These popovers are portaled and positioned via inline styles computed from getBoundingClientRect() rather than Tailwind classes, so the logical start-0/end-0 fix doesn't reach them. They always anchored to the physical right of their trigger (rect.right + 8), which in RTL pushes them further into the edge the trigger is already flush against instead of toward the visible content area. Added isDocumentRTL() to i18n/direction.ts and used it to mirror the computed position in: - navigation-rail.tsx: storage quota popover, logout/switch-account menu - account-switcher.tsx: both the rail and expanded-sidebar variants - calendar-invitation-banner.tsx: the "add to calendar" picker
17 lines
667 B
TypeScript
17 lines
667 B
TypeScript
// RTL locales: Arabic (ar), Hebrew (he), and Persian/Farsi (fa). Everything else is LTR.
|
|
const rtlLocales = new Set(['ar', 'he', 'fa']);
|
|
|
|
export function getLocaleDirection(locale: string): 'ltr' | 'rtl' {
|
|
return rtlLocales.has(locale) ? 'rtl' : 'ltr';
|
|
}
|
|
|
|
/**
|
|
* Whether the document is currently rendering right-to-left. For popovers
|
|
* positioned in JS via getBoundingClientRect() (Tailwind's logical start-0/
|
|
* end-0 utilities don't apply to inline fixed-position styles), check this
|
|
* to anchor on the correct physical side.
|
|
*/
|
|
export function isDocumentRTL(): boolean {
|
|
return typeof document !== 'undefined' && document.documentElement.dir === 'rtl';
|
|
}
|