eleven / messenger Public

web: let chat-list previews wrap to two lines (not hard-clip) (#28)

.thread-row is a <button>, so it inherits white-space:nowrap from the
global button rule. .thread-row-preview never reset it, so the
-webkit-line-clamp:2 couldn't wrap — the preview was laid out on one
non-wrapping line and overflow:hidden clipped it mid-word with no
ellipsis. Reset white-space:normal (and overflow-wrap:anywhere so long
unbroken tokens wrap too) to restore the intended two-line clamp.

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Paul Campbell 4 months ago 7f7642886bf3326e4822ef2a813415176bc231fd parent 1fd842c

1 file changed, +6 −1

web/static/style.css +6 −1

diff --git a/web/static/style.css b/web/static/style.css

index 8c89005..74b2dfa 100644

--- a/web/static/style.css

+++ b/web/static/style.css

@@ -780,9 +780,14 @@ input:focus, textarea:focus { outline: 2px solid var(--accent); border-color: tr

.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). */

+/* Up to two lines of the latest message, then ellipsize (the spacious look).

+ white-space:normal undoes the nowrap inherited from the global `button` rule

+ (.thread-row is a <button>) — without it the line-clamp can't wrap and the

+ preview gets hard-clipped on a single line. overflow-wrap lets long unbroken

+ tokens (e.g. a pasted URL) wrap too. */

.thread-row-preview {

font-size: 13px; font-weight: 400; color: var(--muted); line-height: 1.3;

+ white-space: normal; overflow-wrap: anywhere;

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. */