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, {who} {count > 1 && {count}} + {/* 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 &&
{rowLabels.map((l) => {l.name})}
} {hasAtt && } {formatListDate(latest.receivedAt)} @@ -808,7 +811,6 @@ function RowView({ email: e, threadEmails, top, height, selected, focused, open, - {rowLabels.length > 0 &&
{rowLabels.map((l) => {l.name})}
} ) : ( <>