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;