From 5f713a033b21545094979e60ad9be61473671c2d Mon Sep 17 00:00:00 2001
From: Shuki Vaknin <shukivaknin@gmail.com>
Date: Mon, 22 Jun 2026 16:31:34 +0300
Subject: [PATCH] fix(mail-list): truncate long subjects so they don't overlap
 the timestamp
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

In the single-line (focused) message-list layout, the subject span used
`shrink-0`, which prevented `truncate` from engaging: a long subject sized to
its full content width and overflowed the bounded subject/preview group,
rendering on top of the timestamp on the right.

Let the subject shrink and truncate (`shrink-0` -> `min-w-0`), and give the
inline preview a high shrink factor (`shrink-[9999]`) so it collapses first —
the subject stays fully visible while there's room and only truncates with an
ellipsis once the preview is gone, never colliding with the time.

Applied to both email-list-item and thread-list-item (single-email and
thread-aggregate rows).
---
 components/email/email-list-item.tsx  | 4 ++--
 components/email/thread-list-item.tsx | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/components/email/email-list-item.tsx b/components/email/email-list-item.tsx
index 8bbd3dc6..b6549346 100644
--- a/components/email/email-list-item.tsx
+++ b/components/email/email-list-item.tsx
@@ -195,13 +195,13 @@ export function EmailListItem({ email, selected, onClick, onDoubleClick, onConte
                 </span>
                 <div className="flex min-w-0 flex-1 items-center gap-2 text-sm">
                   <span className={cn(
-                    'shrink-0 truncate',
+                    'min-w-0 truncate',
                     isUnread ? 'font-semibold text-foreground' : 'text-foreground/90'
                   )}>
                     {email.subject || t('no_subject')}
                   </span>
                   {inlinePreview && (
-                    <span className="min-w-0 truncate text-muted-foreground">{inlinePreview}</span>
+                    <span className="min-w-0 shrink-[9999] truncate text-muted-foreground">{inlinePreview}</span>
                   )}
                 </div>
               </div>
diff --git a/components/email/thread-list-item.tsx b/components/email/thread-list-item.tsx
index 0125333c..ebd8ceb0 100644
--- a/components/email/thread-list-item.tsx
+++ b/components/email/thread-list-item.tsx
@@ -245,13 +245,13 @@ const SingleEmailItem = React.forwardRef<HTMLDivElement, SingleEmailItemProps>(
                   </span>
                   <div className="flex min-w-0 flex-1 items-center gap-2 text-sm">
                     <span className={cn(
-                      'shrink-0 truncate',
+                      'min-w-0 truncate',
                       isUnread ? 'font-semibold text-foreground' : 'text-foreground/90'
                     )}>
                       {email.subject || '(no subject)'}
                     </span>
                     {inlinePreview && (
-                      <span className="min-w-0 truncate text-muted-foreground">{inlinePreview}</span>
+                      <span className="min-w-0 shrink-[9999] truncate text-muted-foreground">{inlinePreview}</span>
                     )}
                   </div>
                 </div>
@@ -691,13 +691,13 @@ export const ThreadListItem = React.forwardRef<HTMLDivElement, ThreadListItemPro
                     </span>
                     <div className="flex min-w-0 flex-1 items-center gap-2 text-sm">
                       <span className={cn(
-                        'shrink-0 truncate',
+                        'min-w-0 truncate',
                         hasUnread ? 'font-semibold text-foreground' : 'text-foreground/90'
                       )}>
                         {latestEmail.subject || '(no subject)'}
                       </span>
                       {inlinePreview && (
-                        <span className="min-w-0 truncate text-muted-foreground">{inlinePreview}</span>
+                        <span className="min-w-0 shrink-[9999] truncate text-muted-foreground">{inlinePreview}</span>
                       )}
                     </div>
                   </div>