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

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