From 98dc1afd72cafe774ff859e049486715fb980257 Mon Sep 17 00:00:00 2001 From: mattshax Date: Tue, 8 Sep 2026 20:10:32 +0000 Subject: [PATCH] fix(chat): the suggestion chips size to their text, not the whole canvas Every direct child of the chat canvas is forced to full height for the package's own layout, and the suggestion row is one of those children: it filled the canvas and stretched each chip into a circle drawn over the conversation. The row now sizes to its content and each chip to its own text. Measured in a browser: chips 26px tall in a 58px row, against a 779px canvas. The scrubber and the persona buttons hit this same rule before, which is why the comment names it. --- web/src/styles.css | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/web/src/styles.css b/web/src/styles.css index 0ba7e88..8f56514 100644 --- a/web/src/styles.css +++ b/web/src/styles.css @@ -1305,7 +1305,15 @@ code, pre, kbd, .text-body, .viewer-path, .sql-box, [data-streamdown='code-block .voice-btn { margin-right: 6px; } /* What to type next: chips above the composer while it is empty. */ -.next-up { position: absolute; z-index: 20; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; } +.next-up { + position: absolute; z-index: 20; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; + /* height:auto is load-bearing: .chat-canvas > * forces height:100% on + every direct child, which stretched this row to the whole canvas and + inflated the chips into circles. align-items keeps each chip its own + text's height rather than the row's. (Same trap as the scrubber.) */ + height: auto; align-items: flex-start; +} +.next-up-chip { flex: 0 1 auto; height: auto; } .next-up-chip { pointer-events: auto; font: inherit; font-size: 12px; color: var(--pw-text); background: var(--pw-panel); border: 1px solid var(--pw-border-strong); border-radius: 999px;