From 64b5db01f33ff70fb74a2e61ba05cc9aebe948a6 Mon Sep 17 00:00:00 2001
From: John Coffey <johnellis@linux.com>
Date: Mon, 5 Oct 2026 10:32:18 -0700
Subject: [PATCH] Keep a narrow list's labels inside the row, on the sender's
 line (ihasmail #36)

On a phone or a narrow list, rows are two lines, and labels went on a third
line of their own. A row is a fixed height at each density, and that third
line fit it only at Comfortable: at Cozy, the default, the labels were cut
off at the bottom, and at Compact they sat outside the row.

They now sit on the sender's line, after the name, which has room to spare,
so the row's height is unchanged at every density. When the line runs short
the name gives way first, then each label truncates; the date stays.

Reported in coffey-labs/ihasmail#35.

(cherry picked from commit 22490d8fe0190d85d8039a977435245b0d7da3cc)
---
 web/src/styles/app.css             | 5 +++++
 web/src/views/mail/MessageList.tsx | 4 +++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/web/src/styles/app.css b/web/src/styles/app.css
index 1b57813..eeab1a0 100644
--- a/web/src/styles/app.css
+++ b/web/src/styles/app.css
@@ -1475,6 +1475,11 @@ a.menu-item:hover { color: var(--fg); }
 .mail-list.two-line .msg-row .msg-from { width: auto; flex: 1; }
 .mail-list.two-line .msg-row .msg-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
 .mail-list.two-line .msg-row .msg-line1 { display: flex; align-items: center; gap: 8px; }
+/* Labels share the sender's line (#35). The sender gives way first, then the
+   labels, each of which truncates rather than pushing the date off the row. */
+.mail-list.two-line .msg-row .msg-line1 .msg-from { flex: 0 1 auto; min-width: 3em; }
+.mail-list.two-line .msg-row .msg-line1 .msg-labels { flex: 0 1 auto; min-width: 0; max-width: 55%; overflow: hidden; }
+.mail-list.two-line .msg-row .msg-line1 .msg-labels .tag { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: block; line-height: 18px; }
 .mail-list.two-line .msg-row .msg-main { display: flex; gap: 6px; }
 .mail-list.two-line .msg-row .msg-subject { flex: 0 1 auto; }
 .mail-list.two-line .msg-row .msg-preview { flex: 1; }
diff --git a/web/src/views/mail/MessageList.tsx b/web/src/views/mail/MessageList.tsx
index 2b339d1..9765d22 100644
--- a/web/src/views/mail/MessageList.tsx
+++ b/web/src/views/mail/MessageList.tsx
@@ -795,6 +795,9 @@ function RowView({ email: e, threadEmails, top, height, selected, focused, open,
               <span className="truncate">{who}</span>
               {count > 1 && <span className="thread-count"> {count}</span>}
             </span>
+            {/* On the sender's line, which has room to spare: a third line of
+                their own did not fit the row at Cozy or Compact (#35). */}
+            {rowLabels.length > 0 && <div className="msg-labels">{rowLabels.map((l) => <span key={l.keyword} className="tag" style={{ background: l.color }}>{l.name}</span>)}</div>}
             <span className="msg-meta">
               {hasAtt && <Paperclip size={14} className="msg-attach" />}
               <span className="msg-date">{formatListDate(latest.receivedAt)}</span>
@@ -808,7 +811,6 @@ function RowView({ email: e, threadEmails, top, height, selected, focused, open,
               <Star size={16} fill={starred ? "currentColor" : "none"} />
             </button>
           </div>
-          {rowLabels.length > 0 && <div className="msg-labels">{rowLabels.map((l) => <span key={l.keyword} className="tag" style={{ background: l.color }}>{l.name}</span>)}</div>}
         </div>
       ) : (
         <>