fix(rtl): flip JS-positioned popovers (storage, logout, account switcher, calendar picker)

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
This commit is contained in:
xhzeem
2026-07-21 23:08:02 +02:00
committed by Linus Rath
parent adb8686293
commit 80f76abc38
4 changed files with 73 additions and 23 deletions
+10
View File
@@ -4,3 +4,13 @@ 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';
}