From ca84f946e882f62cd01a1efa8a4c83445d99e933 Mon Sep 17 00:00:00 2001
From: Linus Rath <139418639+rathlinus@users.noreply.github.com>
Date: Tue, 3 Nov 2026 05:43:06 +0100
Subject: [PATCH] fix: keep room for the From address when editing it on a
 phone

---
 components/email/email-composer.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/components/email/email-composer.tsx b/components/email/email-composer.tsx
index 0a08d2a28..56b7dcab6 100644
--- a/components/email/email-composer.tsx
+++ b/components/email/email-composer.tsx
@@ -4481,14 +4481,16 @@ export function EmailComposer({
           {/* From field */}
           <div className="flex items-center gap-2 px-4 py-2.5 border-b border-border/50">
             <span className="text-sm text-muted-foreground w-12 md:w-16 shrink-0">{t('from')}:</span>
-            <div className="flex-1 flex items-center gap-1 min-w-0">
+            <div className={cn("flex-1 flex items-center gap-1 min-w-0", fromOverrideEnabled && "flex-wrap")}>
               {fromOverrideEnabled ? (
-                <div className="flex-1 flex items-center gap-1 min-w-0">
+                // Both fields need room to type in: on a narrow composer they take a
+                // line of their own, or a line each, rather than squeeze to nothing.
+                <div className="flex-1 flex flex-wrap items-center gap-1 min-w-52">
                   <Input
                     value={fromOverrideName}
                     onChange={(e) => setFromOverrideName(e.target.value)}
                     placeholder={t('from_override.name_placeholder')}
-                    className="h-7 text-sm w-32 md:w-40 shrink-0"
+                    className="h-7 text-sm flex-1 min-w-32 md:flex-none md:w-40"
                     aria-label={t('from_override.name_label')}
                   />
                   <Input
@@ -4496,7 +4498,7 @@ export function EmailComposer({
                     onChange={(e) => setFromOverrideEmail(e.target.value)}
                     placeholder={t('from_override.email_placeholder')}
                     type="email"
-                    className="h-7 text-sm flex-1 min-w-0 font-mono"
+                    className="h-7 text-sm flex-[2] min-w-32 font-mono"
                     aria-label={t('from_override.email_label')}
                   />
                 </div>