fix(rtl): anchor floating menus with logical start/end instead of left/right
Popovers and dropdown menus across the app (sub-address helper, calendar toolbar/color pickers, contact/template/attachment menus, rich text editor color and table pickers, unsubscribe confirmation, composer send menu) were anchored with physical `left-0`/`right-0`. In RTL locales those don't flip with the trigger, so the menu detaches from the button that opened it. Switched to Tailwind's logical `start-0`/`end-0` (and the matching `rounded-s-*`/`rounded-e-*` corners on hover-action overlays) so they mirror correctly for RTL locales (ar, he, fa) while staying identical in LTR.
This commit is contained in:
@@ -571,7 +571,7 @@ function MoreActionsMenu({ items, label }: { items: MoreItem[]; label: string })
|
||||
{open && (
|
||||
<div
|
||||
role="menu"
|
||||
className="absolute right-0 top-full mt-1 z-30 min-w-[200px] rounded-md border border-border bg-popover text-popover-foreground shadow-lg py-1 animate-in fade-in-0 zoom-in-95 duration-100"
|
||||
className="absolute end-0 top-full mt-1 z-30 min-w-[200px] rounded-md border border-border bg-popover text-popover-foreground shadow-lg py-1 animate-in fade-in-0 zoom-in-95 duration-100"
|
||||
>
|
||||
{items.map((item, i) => {
|
||||
if (item.separator) {
|
||||
|
||||
@@ -284,7 +284,7 @@ export function ContactsSidebar({
|
||||
{showMenu && (
|
||||
<div
|
||||
ref={menuRef}
|
||||
className="absolute right-0 top-full mt-1 w-44 rounded-md border border-border bg-background text-foreground shadow-md z-50 py-1"
|
||||
className="absolute end-0 top-full mt-1 w-44 rounded-md border border-border bg-background text-foreground shadow-md z-50 py-1"
|
||||
>
|
||||
<button
|
||||
className="w-full flex items-center gap-2 px-3 py-1.5 text-sm hover:bg-accent transition-colors text-start"
|
||||
|
||||
Reference in New Issue
Block a user