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; }

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>
       ) : (
         <>