From 0e758409eeded2afc8527570826942cf0d9bfb23 Mon Sep 17 00:00:00 2001
From: Linus Rath <139418639+rathlinus@users.noreply.github.com>
Date: Sat, 16 May 2026 19:47:03 +0200
Subject: [PATCH] fix: prevent long addresses from overflowing email details
 columns #297

---
 components/email/email-viewer.tsx      | 10 +++++-----
 components/email/recipient-popover.tsx |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/components/email/email-viewer.tsx b/components/email/email-viewer.tsx
index 11253440..d0a85156 100644
--- a/components/email/email-viewer.tsx
+++ b/components/email/email-viewer.tsx
@@ -4226,7 +4226,7 @@ export function EmailViewer({
 
                 return (
                 <div className="mt-3 pt-3 border-t border-border grid grid-cols-1 lg:grid-cols-2 gap-x-10 gap-y-5">
-                  <section>
+                  <section className="min-w-0">
                   <SectionHeader>{t('details.recipients_routing')}</SectionHeader>
                   <dl className="grid grid-cols-[7rem_1fr] gap-x-4 gap-y-1.5">
                     <Row label={t('from')}>
@@ -4283,7 +4283,7 @@ export function EmailViewer({
                   </section>
 
                   {hasAuthSection && (
-                    <section>
+                    <section className="min-w-0">
                       <SectionHeader>{t('details.authentication_security')}</SectionHeader>
                       <div className="flex flex-wrap gap-1.5">
                         {auth?.spf && (
@@ -4351,7 +4351,7 @@ export function EmailViewer({
                   )}
 
                   {hasIdentifiers && (
-                    <section>
+                    <section className="min-w-0">
                       <SectionHeader>{t('details.identifiers_threading')}</SectionHeader>
                       <dl className="grid grid-cols-[7rem_1fr] gap-x-4 gap-y-1.5">
                         {email.messageId && (
@@ -4384,7 +4384,7 @@ export function EmailViewer({
                     </section>
                   )}
 
-                  <section>
+                  <section className="min-w-0">
                     <SectionHeader>{t('details.message_properties')}</SectionHeader>
                     <dl className="grid grid-cols-[7rem_1fr] gap-x-4 gap-y-1.5">
                       {email.subject !== undefined && (
@@ -4411,7 +4411,7 @@ export function EmailViewer({
                   </section>
 
                   {hasListInfo && (
-                    <section className="lg:col-span-2">
+                    <section className="lg:col-span-2 min-w-0">
                       <SectionHeader>{t('details.mailing_list')}</SectionHeader>
                       <dl className="grid grid-cols-[7rem_1fr] gap-x-4 gap-y-1.5">
                         {listHeaders?.listId && (
diff --git a/components/email/recipient-popover.tsx b/components/email/recipient-popover.tsx
index 9f1e5468..ab66ea67 100644
--- a/components/email/recipient-popover.tsx
+++ b/components/email/recipient-popover.tsx
@@ -127,7 +127,7 @@ export function RecipientPopover({ name, email, displayLabel, onViewContact, cla
         ref={triggerRef}
         onClick={handleOpen}
         className={cn(
-          "text-foreground hover:text-primary hover:underline cursor-pointer transition-colors",
+          "text-foreground hover:text-primary hover:underline cursor-pointer transition-colors min-w-0 break-words",
           className
         )}
       >