From 4b203be675d94a9aa27a6a61d038f58b11257529 Mon Sep 17 00:00:00 2001
From: teoaliano <matterass@gmail.com>
Date: Mon, 9 Nov 2026 12:01:53 +0100
Subject: [PATCH] fix(web): question banner above the composer has even spacing

The question header text sat low in its row, the sides had more padding
than the rest of the banner, and the hover background had fully rounded
bottom corners against the composer. Center the header text, trim the
side and bottom padding, use 4px bottom corners on hover, and tighten
the space above the expanded question.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/web/src/components/chat/ChatComposer.tsx               | 6 +++++-
 .../src/components/chat/ComposerPendingUserInputPanel.tsx   | 6 +++---
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/components/chat/ChatComposer.tsx b/apps/web/src/components/chat/ChatComposer.tsx
index 2f20c4810d994..183f2604dfbd7 100644
--- a/apps/web/src/components/chat/ChatComposer.tsx
+++ b/apps/web/src/components/chat/ChatComposer.tsx
@@ -3250,7 +3250,11 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
           <ComposerBannerStack items={shelfItems} />
           {showComposerTopDrawer ? (
             <ComposerBanner.Attachment>
-              <ComposerBanner.Root data-chat-composer-top-drawer="true" variant="info">
+              <ComposerBanner.Root
+                data-chat-composer-top-drawer="true"
+                variant="info"
+                className="pb-0.75"
+              >
                 {pendingUserInputs.length > 0 ? (
                   <ComposerPendingUserInputPanel
                     pendingUserInputs={pendingUserInputs}
diff --git a/apps/web/src/components/chat/ComposerPendingUserInputPanel.tsx b/apps/web/src/components/chat/ComposerPendingUserInputPanel.tsx
index a19e7f205cef9..3f810aa646c7e 100644
--- a/apps/web/src/components/chat/ComposerPendingUserInputPanel.tsx
+++ b/apps/web/src/components/chat/ComposerPendingUserInputPanel.tsx
@@ -205,7 +205,7 @@ const ComposerPendingUserInputCard = memo(function ComposerPendingUserInputCard(
           isCollapsed ? "Show the question and its options" : "Hide the question and its options"
         }
         data-pending-user-input-toggle={isCollapsed ? "collapsed" : "expanded"}
-        className="px-4 pt-1.5"
+        className="px-2 [&:is(button)]:rounded-b-sm"
       >
         <ComposerBanner.Content>
           <span
@@ -257,12 +257,12 @@ const ComposerPendingUserInputCard = memo(function ComposerPendingUserInputCard(
       </CollapsibleTrigger>
       <CollapsiblePanel>
         <ComposerBanner.Scroll>
-          <ComposerBanner.Body className="ps-6 pe-4 pb-1 wrap-anywhere sm:ps-5.5">
+          <ComposerBanner.Body className="ps-4 pe-2 pb-1 wrap-anywhere sm:ps-3.5">
             <ChatMarkdown
               text={activeQuestion.question}
               cwd={cwd}
               threadRef={threadRef}
-              className={cn("pt-2 text-foreground/85", questionTextAlign)}
+              className={cn("pt-1 text-foreground/85", questionTextAlign)}
             />
             {/* Rows span the header row's width so the radios align with the question text and the shortcut column sits under the dismiss button. */}
             <div className="-ms-2 mt-1.5 sm:-ms-1.5">