amadan
web: roomier chat list — bigger avatar + two-line message preview (#23)
Match the WhatsApp/iMessage chat-list feel: enlarge the list avatar to 52px (scoped to .thread-row, so header/profile/reaction avatars keep their sizes), let the latest-message preview wrap to two lines (-webkit-line-clamp), and add breathing room (more gap/padding, slightly larger name). The timestamp stays pinned top-right, aligned with the name, even when the preview wraps. CSS-only.
Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
1 file changed,
+14
−6
web/static/style.css+14 −6
diff --git a/web/static/style.css b/web/static/style.css| index e573d10..37410b2 100644 |
| --- a/web/static/style.css |
| +++ b/web/static/style.css |
| @@ -757,14 +757,22 @@ input:focus, textarea:focus { outline: 2px solid var(--accent); border-color: tr |
| .thread-list { flex: 1; overflow-y: auto; min-height: 0; padding: 6px; display: flex; flex-direction: column; gap: 2px; } |
| .thread-empty-note { color: var(--muted); padding: 16px; font-size: 14px; } |
| .thread-row { |
| - display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; |
| - background: transparent; color: var(--ink); border-radius: 12px; padding: 10px 12px; |
| + display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; |
| + background: transparent; color: var(--ink); border-radius: 14px; padding: 9px 14px; |
| } |
| .thread-row:hover, .thread-row.active { background: var(--bubble-them); } |
| -.thread-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } |
| -.thread-row-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } |
| -.thread-row-preview { font-size: 13px; font-weight: 400; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } |
| -.thread-row-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: none; } |
| +/* Bigger avatar in the chat list (à la WhatsApp/iMessage); scoped to the list so |
| + header/profile/reaction avatars keep their sizes. */ |
| +.thread-row .avatar { width: 52px; height: 52px; font-size: 21px; } |
| +.thread-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } |
| +.thread-row-name { font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } |
| +/* Up to two lines of the latest message, then ellipsize (the spacious look). */ |
| +.thread-row-preview { |
| + font-size: 13px; font-weight: 400; color: var(--muted); line-height: 1.3; |
| + display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; |
| +} |
| +/* Time sits top-right, aligned with the name, even when the preview wraps to two lines. */ |
| +.thread-row-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: none; align-self: flex-start; padding-top: 3px; } |
| .thread-row-time { font-size: 11px; font-weight: 400; color: var(--muted); white-space: nowrap; } |
| .unread-dot { width: 8px; height: 8px; border-radius: 50%; background: transparent; flex: none; } |
| .unread-dot.on { background: var(--accent); } |