From 253ff645be87f4320f256cba3ca4585e3974f5a4 Mon Sep 17 00:00:00 2001 From: Brian Love Date: Tue, 19 May 2026 09:43:20 -0700 Subject: [PATCH] fix(chat-welcome): apply suggestions gap one level down for wrapped chips MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The `.chat-welcome__suggestions` slot in `chat-welcome` had `display: flex; gap: 8px` so projected children would be spaced. But every consumer in the cockpit (and the c-a2ui example) projects suggestions wrapped in a single `
` element — meaning the slot's gap fires between *zero pairs of divs* (there's only one), and the chips inside that div sit flush against each other with no gap. Visible on c-a2ui with the recently-added 'LAX → JFK' / 'SFO → SEA' chips: the two pills touched. Less visible on c-generative-ui because the chips have longer labels and natural padding masks the issue — but the same bug. Add a one-level-deeper rule that re-applies the same flex layout to any wrapping `
` child of the slot. Safe no-op when consumers project `` directly (no wrapper div). Verified locally via chrome MCP: c-a2ui welcome chips now show a clear 8px gap. Co-Authored-By: Claude Opus 4.7 (1M context) --- libs/chat/src/lib/styles/chat-welcome.styles.ts | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/libs/chat/src/lib/styles/chat-welcome.styles.ts b/libs/chat/src/lib/styles/chat-welcome.styles.ts index d27cffcfd..ddd37a552 100644 --- a/libs/chat/src/lib/styles/chat-welcome.styles.ts +++ b/libs/chat/src/lib/styles/chat-welcome.styles.ts @@ -55,6 +55,17 @@ export const CHAT_WELCOME_STYLES = ` gap: 8px; margin-top: 4px; } + /* Consumers commonly project chips wrapped in a single
element. In that case the slot's flex gap + applies between divs (one of them) — not between the chips inside. + Apply the same flex layout one level down so the chips actually + get spacing. Safe no-op when chips are projected directly. */ + .chat-welcome__suggestions > div { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 8px; + } .chat-welcome__suggestions:empty { display: none; } `;