From c7250dc92178b819b91cff577b0bd511c99f6dee Mon Sep 17 00:00:00 2001
From: xhzeem <xhzeem@gmail.com>
Date: Tue, 21 Jul 2026 23:30:52 +0300
Subject: [PATCH] fix(rtl): isolate Latin address text ("Name <email>") from
 RTL bidi reordering

Unicode's bidi algorithm treats < and > as mirrored characters. When a
plain "Name <email>" string is rendered as a text node inside an
RTL-inherited container, the browser swaps and reorders those brackets
for the whole run, producing garbled output (e.g. "<Maria Lopez
<maria.lopez@company.example" instead of "Maria Lopez
<maria.lopez@company.example>").

Wrapped the affected text in native <bdi>, which auto-detects its own
paragraph direction from its content rather than inheriting the
ancestor's - so a Latin address renders LTR and a genuinely
Arabic/Hebrew/Farsi name still renders RTL, both correctly, in:
- recipient-popover.tsx (shared by the email viewer's From/To/Cc/Bcc
  detail rows and the calendar invitation banner's organizer row)
- email-composer.tsx's read-only From display
- eml-preview.tsx's From/To header lines

Left the equivalent <select><option> cases (composer identity picker,
template identity picker) and the composer's quote-header text (which
becomes actual email body content, already isolated per-paragraph by
the existing TextDirection tiptap extension) out of scope - both need
a different fix approach than <bdi>.
---
 components/email/email-composer.tsx    | 4 ++--
 components/email/recipient-popover.tsx | 2 +-
 components/files/eml-preview.tsx       | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/components/email/email-composer.tsx b/components/email/email-composer.tsx
index f925a8d2..5640c5e8 100644
--- a/components/email/email-composer.tsx
+++ b/components/email/email-composer.tsx
@@ -2217,11 +2217,11 @@ export function EmailComposer({
                       {generateSubAddress(primaryIdentity?.email || '', subAddressTag, subAddressDelimiter)}
                     </span>
                   ) : (
-                    <>
+                    <bdi>
                       {primaryIdentity?.name
                         ? `${primaryIdentity.name} <${primaryIdentity.email}>`
                         : primaryIdentity?.email || ''}
-                    </>
+                    </bdi>
                   )}
                 </span>
               )}
diff --git a/components/email/recipient-popover.tsx b/components/email/recipient-popover.tsx
index 84c3c938..32b39b39 100644
--- a/components/email/recipient-popover.tsx
+++ b/components/email/recipient-popover.tsx
@@ -135,7 +135,7 @@ export function RecipientPopover({ name, email, displayLabel, onViewContact, cla
           className
         )}
       >
-        {displayLabel || name || email}
+        <bdi>{displayLabel || name || email}</bdi>
       </button>
 
       {isOpen &&
diff --git a/components/files/eml-preview.tsx b/components/files/eml-preview.tsx
index aff7eb8e..3ed5e75d 100644
--- a/components/files/eml-preview.tsx
+++ b/components/files/eml-preview.tsx
@@ -68,10 +68,10 @@ export function EmlPreview({ message }: { message: ParsedEml }) {
       <h2 className="text-lg font-semibold text-foreground break-words">{message.subject || ""}</h2>
       <div className="mt-2 space-y-0.5 text-sm text-muted-foreground border-b border-border pb-3">
         {message.from && (
-          <div><span className="font-medium text-foreground">{t("from")}: </span>{formatAddress(message.from)}</div>
+          <div><span className="font-medium text-foreground">{t("from")}: </span><bdi>{formatAddress(message.from)}</bdi></div>
         )}
         {message.to && message.to.length > 0 && (
-          <div><span className="font-medium text-foreground">{t("to")}: </span>{message.to.map(formatAddress).join(", ")}</div>
+          <div><span className="font-medium text-foreground">{t("to")}: </span><bdi>{message.to.map(formatAddress).join(", ")}</bdi></div>
         )}
         {message.date && (
           <div><span className="font-medium text-foreground">{t("date")}: </span>{new Date(message.date).toLocaleString()}</div>