From d60d5d48411b05dde2a215c7f50935fa24f965d9 Mon Sep 17 00:00:00 2001 From: Eli Mallon Date: Thu, 30 Apr 2026 12:27:50 -0700 Subject: [PATCH] Wrap chat bubbles to 3 lines Streamer (goose.art): "allow text wrapping on chat bubbles up to 3 lines". Override the base .pet-label one-liner-with-ellipsis behaviour just for .chatting bubbles: white-space normal + -webkit-line-clamp 3 over a -webkit-box layout, plus a slightly wider max-width and centred text so short messages still feel balanced. word-break: break-word stops a single very long token from breaking the layout. Co-Authored-By: Claude Opus 4.7 (1M context) --- pets.html | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/pets.html b/pets.html index d5fc4a2..ed92196 100644 --- a/pets.html +++ b/pets.html @@ -128,7 +128,8 @@ transition: background-color 0.18s, color 0.18s; } /* Per chat: speech bubbles square-ish + Comic Sans. Only when chatting, - so the @handle pill stays the small system-font pill. */ + so the @handle pill stays the small system-font pill. + Wraps up to 3 lines (per streamer follow-up) using -webkit-line-clamp. */ .pet-label.chatting { background: rgba(255,255,255,0.96); color: #1a1a1a; @@ -140,6 +141,15 @@ padding: 3px 8px; border: 2px solid #1a1a1a; box-shadow: 2px 2px 0 #1a1a1a; + white-space: normal; + text-align: center; + line-height: 1.25; + max-width: 280px; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; + word-break: break-word; } /* Walk bob — only for SVG pets */ -- 2.51.2