From 9eaaa614fee2a70bdb02ab91c5cb104cebcf5628 Mon Sep 17 00:00:00 2001
From: Shuki Vaknin <shukivaknin@gmail.com>
Date: Wed, 19 Aug 2026 03:46:10 +0300
Subject: [PATCH] fix(mobile): keep swipe action icon on the physically exposed
 edge in RTL

The reveal layer used logical justify-start/-end, which flip under RTL, so
the archive/delete icon appeared on the wrong side. The exposed edge
follows the physical translate direction, not text direction, so force the
decorative layer to LTR.
---
 components/email/thread-list-item.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/components/email/thread-list-item.tsx b/components/email/thread-list-item.tsx
index 43692f2c7..eef2d6442 100644
--- a/components/email/thread-list-item.tsx
+++ b/components/email/thread-list-item.tsx
@@ -278,8 +278,13 @@ const SingleEmailItem = React.forwardRef<HTMLDivElement, SingleEmailItemProps>(
         style={{ minHeight: isFocusedMailLayout ? undefined : 'var(--list-item-height)', touchAction: swipeEnabled ? 'pan-y' : undefined }}
       >
         {swipeEnabled && swipeMeta && (
+          // Decorative reveal on the physically exposed edge. That edge
+          // follows the (physical) translate direction, not text direction,
+          // so force LTR to keep justify-start/-end as physical left/right
+          // (otherwise the icon flips to the wrong side under RTL).
           <div
             aria-hidden
+            dir="ltr"
             className={cn('absolute inset-0 z-0 flex items-center px-5 text-white', swipeMeta.bg, swipeSide === 'right' ? 'justify-start' : 'justify-end')}
           >
             <swipeMeta.icon className={cn('h-5 w-5 transition-transform', willCommit ? 'scale-110' : 'scale-90 opacity-80')} />