From 193a28339e0bd9e3896f50d327b1745283f046b8 Mon Sep 17 00:00:00 2001
From: Bil0000 <62337003+Bil0000@users.noreply.github.com>
Date: Thu, 17 Sep 2026 02:21:38 +0200
Subject: [PATCH 1/7] fix(web): bound long composer questions

---
 .../chat/ComposerPendingUserInputPanel.tsx    | 122 +++++++++---------
 1 file changed, 63 insertions(+), 59 deletions(-)

diff --git a/apps/web/src/components/chat/ComposerPendingUserInputPanel.tsx b/apps/web/src/components/chat/ComposerPendingUserInputPanel.tsx
index 4803708d7943..7462068afefb 100644
--- a/apps/web/src/components/chat/ComposerPendingUserInputPanel.tsx
+++ b/apps/web/src/components/chat/ComposerPendingUserInputPanel.tsx
@@ -228,66 +228,70 @@ const ComposerPendingUserInputCard = memo(function ComposerPendingUserInputCard(
         </ComposerBanner.Actions>
       </CollapsibleTrigger>
       <CollapsiblePanel>
-        <ComposerBanner.Body className="pe-1 pb-1">
-          <p className="text-sm text-foreground/85">{activeQuestion.question}</p>
-          {activeQuestion.multiSelect ? (
-            <p className="mt-1 text-secondary-label text-xs">Select one or more options.</p>
-          ) : null}
-          <div className="mt-2 space-y-0.5">
-            {activeQuestion.options.map((option, index) => {
-              const optionValue = option.value ?? option.label;
-              const isOptimisticallySelected =
-                optimisticSingleSelect?.questionId === activeQuestion.id &&
-                optimisticSingleSelect.optionValue === optionValue;
-              const isSelected =
-                isOptimisticallySelected ||
-                (!customAnswerActive && progress.selectedOptionValues.includes(optionValue));
-              const shortcutKey = index < 9 ? index + 1 : null;
-              const className = cn(
-                "group flex w-full items-center gap-2 rounded-md px-2.5 py-2 text-left outline-none transition-colors duration-150 focus-visible:ring-1 focus-visible:ring-primary/25",
-                isSelected
-                  ? "bg-muted/55 text-foreground"
-                  : "bg-transparent text-foreground/85 hover:bg-muted/30",
-                isResponding && "opacity-50 cursor-not-allowed",
-                !isResponding && "cursor-pointer",
-              );
-              const content = (
-                <>
-                  <div className="min-w-0 flex-1 flex flex-col gap-0.5">
-                    <span className="text-sm font-medium">{option.label}</span>
-                    {option.description && option.description !== option.label ? (
-                      <span className="text-secondary-label text-[11px]">{option.description}</span>
+        <ComposerBanner.Scroll>
+          <ComposerBanner.Body className="pe-1 pb-1 wrap-anywhere">
+            <p className="text-sm text-foreground/85">{activeQuestion.question}</p>
+            {activeQuestion.multiSelect ? (
+              <p className="mt-1 text-secondary-label text-xs">Select one or more options.</p>
+            ) : null}
+            <div className="mt-2 space-y-0.5">
+              {activeQuestion.options.map((option, index) => {
+                const optionValue = option.value ?? option.label;
+                const isOptimisticallySelected =
+                  optimisticSingleSelect?.questionId === activeQuestion.id &&
+                  optimisticSingleSelect.optionValue === optionValue;
+                const isSelected =
+                  isOptimisticallySelected ||
+                  (!customAnswerActive && progress.selectedOptionValues.includes(optionValue));
+                const shortcutKey = index < 9 ? index + 1 : null;
+                const className = cn(
+                  "group flex w-full items-center gap-2 rounded-md px-2.5 py-2 text-left outline-none transition-colors duration-150 focus-visible:ring-1 focus-visible:ring-primary/25",
+                  isSelected
+                    ? "bg-muted/55 text-foreground"
+                    : "bg-transparent text-foreground/85 hover:bg-muted/30",
+                  isResponding && "opacity-50 cursor-not-allowed",
+                  !isResponding && "cursor-pointer",
+                );
+                const content = (
+                  <>
+                    <div className="min-w-0 flex-1 flex flex-col gap-0.5">
+                      <span className="text-sm font-medium">{option.label}</span>
+                      {option.description && option.description !== option.label ? (
+                        <span className="text-secondary-label text-[11px]">
+                          {option.description}
+                        </span>
+                      ) : null}
+                    </div>
+                    {isSelected ? (
+                      <CheckIcon className="size-3.5 shrink-0 text-primary" />
+                    ) : shortcutKey !== null ? (
+                      <kbd
+                        className={cn(
+                          "flex size-5 shrink-0 items-center justify-center text-[10px] font-medium text-muted-foreground tabular-nums",
+                        )}
+                      >
+                        {shortcutKey}
+                      </kbd>
                     ) : null}
-                  </div>
-                  {isSelected ? (
-                    <CheckIcon className="size-3.5 shrink-0 text-primary" />
-                  ) : shortcutKey !== null ? (
-                    <kbd
-                      className={cn(
-                        "flex size-5 shrink-0 items-center justify-center text-[10px] font-medium text-muted-foreground tabular-nums",
-                      )}
-                    >
-                      {shortcutKey}
-                    </kbd>
-                  ) : null}
-                </>
-              );
-              return (
-                <button
-                  key={`${activeQuestion.id}:${optionValue}`}
-                  type="button"
-                  disabled={isResponding}
-                  onClick={() => {
-                    handleOptionSelection(activeQuestion.id, optionValue);
-                  }}
-                  className={className}
-                >
-                  {content}
-                </button>
-              );
-            })}
-          </div>
-        </ComposerBanner.Body>
+                  </>
+                );
+                return (
+                  <button
+                    key={`${activeQuestion.id}:${optionValue}`}
+                    type="button"
+                    disabled={isResponding}
+                    onClick={() => {
+                      handleOptionSelection(activeQuestion.id, optionValue);
+                    }}
+                    className={className}
+                  >
+                    {content}
+                  </button>
+                );
+              })}
+            </div>
+          </ComposerBanner.Body>
+        </ComposerBanner.Scroll>
       </CollapsiblePanel>
     </Collapsible>
   );

From 6a9f85b6aadf245501b9592ff91d54ea6d65cb8a Mon Sep 17 00:00:00 2001
From: Bil0000 <62337003+Bil0000@users.noreply.github.com>
Date: Thu, 17 Sep 2026 02:22:35 +0200
Subject: [PATCH 2/7] fix(web): clarify composer notice layout

---
 apps/web/src/components/ChatView.tsx          |  2 +-
 .../src/components/chat/ComposerBanner.tsx    |  7 ++----
 .../components/chat/ComposerBannerStack.tsx   | 23 ++++++++-----------
 3 files changed, 13 insertions(+), 19 deletions(-)

diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx
index ec17751ce725..ba9daed83ac9 100644
--- a/apps/web/src/components/ChatView.tsx
+++ b/apps/web/src/components/ChatView.tsx
@@ -2202,7 +2202,7 @@ export default function ChatView(props: ChatViewProps) {
           </Button>
           <Button
             size="xs"
-            variant="ghost"
+            variant="default"
             onClick={() =>
               void runProjectCloneAction("Failed to retry clone", () =>
                 retryProjectClone({ environmentId, input: { projectId } }),
diff --git a/apps/web/src/components/chat/ComposerBanner.tsx b/apps/web/src/components/chat/ComposerBanner.tsx
index d81d6c1aa506..88c085aa6cb5 100644
--- a/apps/web/src/components/chat/ComposerBanner.tsx
+++ b/apps/web/src/components/chat/ComposerBanner.tsx
@@ -183,7 +183,7 @@ function Row({
   layout = "inline",
   ...props
 }: useRender.ComponentProps<"div"> & {
-  layout?: "inline" | "wrap-actions" | "wrap-actions-narrow" | "approval";
+  layout?: "inline" | "wrap-actions" | "approval";
 }) {
   const rowProps = {
     className: cn(
@@ -192,8 +192,6 @@ function Row({
       "[&:is(button)]:cursor-pointer [&:is(button)]:rounded-[0.5rem] [&:is(button)]:focus-visible:outline-2 [&:is(button)]:focus-visible:-outline-offset-2 [&:is(button)]:focus-visible:outline-ring",
       layout === "wrap-actions" &&
         "@max-[400px]:*:data-[slot=composer-banner-content]:min-h-(--composer-banner-icon-column)",
-      layout === "wrap-actions-narrow" &&
-        "@max-[320px]:*:data-[slot=composer-banner-content]:min-h-(--composer-banner-icon-column)",
       layout === "approval" && "items-start gap-x-2 gap-y-3",
       className,
     ),
@@ -257,8 +255,7 @@ function Actions({ className, ...props }: ComponentProps<"span">) {
       className={cn(
         "col-start-3 row-start-1 flex flex-wrap items-center justify-end gap-1",
         "group-data-[composer-banner-layout=approval]/banner-row:self-center group-data-[composer-banner-layout=approval]/banner-row:gap-1.5 @max-[560px]:group-data-[composer-banner-layout=approval]/banner-row:col-start-2 @max-[560px]:group-data-[composer-banner-layout=approval]/banner-row:col-end-4 @max-[560px]:group-data-[composer-banner-layout=approval]/banner-row:row-start-2",
-        "@max-[400px]:group-data-[composer-banner-layout=wrap-actions]/banner-row:has-[>:nth-child(2)]:col-start-2 @max-[400px]:group-data-[composer-banner-layout=wrap-actions]/banner-row:has-[>:nth-child(2)]:col-end-4 @max-[400px]:group-data-[composer-banner-layout=wrap-actions]/banner-row:has-[>:nth-child(2)]:row-start-2 @max-[400px]:group-data-[composer-banner-layout=wrap-actions]/banner-row:has-[>:nth-child(2)]:-ms-2 @max-[400px]:group-data-[composer-banner-layout=wrap-actions]/banner-row:has-[>:nth-child(2)]:justify-start",
-        "@max-[320px]:group-data-[composer-banner-layout=wrap-actions-narrow]/banner-row:has-[>:nth-child(2)]:col-start-2 @max-[320px]:group-data-[composer-banner-layout=wrap-actions-narrow]/banner-row:has-[>:nth-child(2)]:col-end-4 @max-[320px]:group-data-[composer-banner-layout=wrap-actions-narrow]/banner-row:has-[>:nth-child(2)]:row-start-2 @max-[320px]:group-data-[composer-banner-layout=wrap-actions-narrow]/banner-row:has-[>:nth-child(2)]:-ms-2 @max-[320px]:group-data-[composer-banner-layout=wrap-actions-narrow]/banner-row:has-[>:nth-child(2)]:justify-start",
+        "@max-[400px]:group-data-[composer-banner-layout=wrap-actions]/banner-row:has-[>:nth-child(2)]:col-start-2 @max-[400px]:group-data-[composer-banner-layout=wrap-actions]/banner-row:has-[>:nth-child(2)]:col-end-4 @max-[400px]:group-data-[composer-banner-layout=wrap-actions]/banner-row:has-[>:nth-child(2)]:row-start-2 @max-[400px]:group-data-[composer-banner-layout=wrap-actions]/banner-row:has-[>:nth-child(2)]:justify-end",
         className,
       )}
       {...props}
diff --git a/apps/web/src/components/chat/ComposerBannerStack.tsx b/apps/web/src/components/chat/ComposerBannerStack.tsx
index c540613b009c..c0f2a189e398 100644
--- a/apps/web/src/components/chat/ComposerBannerStack.tsx
+++ b/apps/web/src/components/chat/ComposerBannerStack.tsx
@@ -270,22 +270,17 @@ function ComposerBannerStackAlert({
       variant={item.variant}
       density="comfortable"
     >
-      <ComposerBanner.Row layout="wrap-actions-narrow">
+      <ComposerBanner.Row layout="wrap-actions">
         <ComposerBanner.Icon className="h-(--composer-banner-icon-column) self-start">
           {item.icon}
         </ComposerBanner.Icon>
-        <ComposerBanner.Content className="whitespace-nowrap">
-          <span
-            className={cn(
-              "min-w-0 font-medium leading-7 sm:leading-6",
-              typeof item.title === "string" && "truncate",
-            )}
-          >
+        <ComposerBanner.Content className="flex-col items-start gap-0.5 py-0.5">
+          <span className="w-full min-w-0 font-medium whitespace-normal wrap-anywhere">
             {item.title}
           </span>
           {item.description ? (
-            <>
-              <span className="min-w-0 shrink-[9999] truncate text-muted-foreground @max-[400px]:sr-only">
+            <span className="flex w-full min-w-0 items-start gap-1">
+              <span className="line-clamp-2 min-w-0 whitespace-normal text-muted-foreground wrap-anywhere">
                 {item.description}
               </span>
               <Popover>
@@ -296,21 +291,23 @@ function ComposerBannerStackAlert({
                       size="icon-xs"
                       variant="ghost"
                       aria-label="Show notice details"
-                      className="hidden flex-none text-muted-foreground hover:text-foreground @max-[400px]:inline-flex"
+                      className="-my-1 flex-none text-muted-foreground hover:text-foreground"
                     />
                   }
                 >
                   <InfoIcon className="size-3.5" />
                 </PopoverTrigger>
                 <PopoverPopup
+                  aria-label="Notice details"
                   tooltipStyle
                   side="top"
-                  className="max-w-72 whitespace-normal text-pretty"
+                  className="max-w-80 whitespace-normal text-pretty wrap-anywhere"
+                  viewportClassName="max-h-[min(var(--available-height),24rem,40dvh)] overflow-y-auto"
                 >
                   {item.description}
                 </PopoverPopup>
               </Popover>
-            </>
+            </span>
           ) : null}
         </ComposerBanner.Content>
         {item.actions || item.onDismiss ? (

From c6111ff3508729db3d481e362bcfb725be533f3d Mon Sep 17 00:00:00 2001
From: Bil0000 <62337003+Bil0000@users.noreply.github.com>
Date: Thu, 17 Sep 2026 02:24:03 +0200
Subject: [PATCH 3/7] fix(web): keep task summaries compact in narrow panes

---
 apps/web/src/components/chat/ComposerTasksBadge.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/components/chat/ComposerTasksBadge.tsx b/apps/web/src/components/chat/ComposerTasksBadge.tsx
index 2eca3e23739a..072447ef9ab9 100644
--- a/apps/web/src/components/chat/ComposerTasksBadge.tsx
+++ b/apps/web/src/components/chat/ComposerTasksBadge.tsx
@@ -90,9 +90,10 @@ function TaskSummary({
           className={progress.completedSteps >= progress.totalSteps ? "text-success" : undefined}
           data-composer-task-progress="true"
         >
-          {progress.completedSteps}/{progress.totalSteps} complete
+          {progress.completedSteps}/{progress.totalSteps}
+          <span className="sr-only"> complete</span>
         </ComposerBanner.Count>
-        <TaskSegments className="hidden w-20 sm:flex" steps={steps} />
+        <TaskSegments className="hidden w-20 @min-[560px]:flex" steps={steps} />
         <ComposerBanner.ToggleIcon expanded={expanded} />
       </ComposerBanner.Actions>
     </>

From 41bdddb8573d3e69b2c5c7a104a095db8d151f13 Mon Sep 17 00:00:00 2001
From: Bil0000 <62337003+Bil0000@users.noreply.github.com>
Date: Thu, 17 Sep 2026 02:32:27 +0200
Subject: [PATCH 4/7] fix(web): make long notice details keyboard-scrollable

---
 apps/web/src/components/chat/ComposerBannerStack.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/components/chat/ComposerBannerStack.tsx b/apps/web/src/components/chat/ComposerBannerStack.tsx
index c0f2a189e398..6c864a730d0c 100644
--- a/apps/web/src/components/chat/ComposerBannerStack.tsx
+++ b/apps/web/src/components/chat/ComposerBannerStack.tsx
@@ -302,9 +302,10 @@ function ComposerBannerStackAlert({
                   tooltipStyle
                   side="top"
                   className="max-w-80 whitespace-normal text-pretty wrap-anywhere"
-                  viewportClassName="max-h-[min(var(--available-height),24rem,40dvh)] overflow-y-auto"
                 >
-                  {item.description}
+                  <ComposerBanner.Scroll className="max-h-[min(var(--available-height),24rem,40dvh)]">
+                    {item.description}
+                  </ComposerBanner.Scroll>
                 </PopoverPopup>
               </Popover>
             </span>

From 81dc655eca6afa037eff3fdc52d9acc32e2f5c30 Mon Sep 17 00:00:00 2001
From: Bil0000 <62337003+Bil0000@users.noreply.github.com>
Date: Thu, 17 Sep 2026 03:02:11 +0200
Subject: [PATCH 5/7] fix(web): keep composer notice details on one line

---
 apps/web/src/components/chat/ComposerBannerStack.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/apps/web/src/components/chat/ComposerBannerStack.tsx b/apps/web/src/components/chat/ComposerBannerStack.tsx
index 6c864a730d0c..dcee206ce45f 100644
--- a/apps/web/src/components/chat/ComposerBannerStack.tsx
+++ b/apps/web/src/components/chat/ComposerBannerStack.tsx
@@ -280,9 +280,7 @@ function ComposerBannerStackAlert({
           </span>
           {item.description ? (
             <span className="flex w-full min-w-0 items-start gap-1">
-              <span className="line-clamp-2 min-w-0 whitespace-normal text-muted-foreground wrap-anywhere">
-                {item.description}
-              </span>
+              <span className="min-w-0 truncate text-muted-foreground">{item.description}</span>
               <Popover>
                 <PopoverTrigger
                   openOnHover

From 21c751d713ef3be4a73a9c64d1d6a2001ffd4eaf Mon Sep 17 00:00:00 2001
From: Bil0000 <62337003+Bil0000@users.noreply.github.com>
Date: Thu, 17 Sep 2026 12:38:56 +0200
Subject: [PATCH 6/7] fix(web): keep composer notice text in one row

---
 apps/web/src/components/chat/ComposerBannerStack.tsx | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/apps/web/src/components/chat/ComposerBannerStack.tsx b/apps/web/src/components/chat/ComposerBannerStack.tsx
index dcee206ce45f..e2d268ef5683 100644
--- a/apps/web/src/components/chat/ComposerBannerStack.tsx
+++ b/apps/web/src/components/chat/ComposerBannerStack.tsx
@@ -274,12 +274,10 @@ function ComposerBannerStackAlert({
         <ComposerBanner.Icon className="h-(--composer-banner-icon-column) self-start">
           {item.icon}
         </ComposerBanner.Icon>
-        <ComposerBanner.Content className="flex-col items-start gap-0.5 py-0.5">
-          <span className="w-full min-w-0 font-medium whitespace-normal wrap-anywhere">
-            {item.title}
-          </span>
+        <ComposerBanner.Content className="whitespace-nowrap">
+          <span className="min-w-0 truncate font-medium leading-7 sm:leading-6">{item.title}</span>
           {item.description ? (
-            <span className="flex w-full min-w-0 items-start gap-1">
+            <span className="flex min-w-8 flex-1 items-center gap-1">
               <span className="min-w-0 truncate text-muted-foreground">{item.description}</span>
               <Popover>
                 <PopoverTrigger
@@ -289,7 +287,7 @@ function ComposerBannerStackAlert({
                       size="icon-xs"
                       variant="ghost"
                       aria-label="Show notice details"
-                      className="-my-1 flex-none text-muted-foreground hover:text-foreground"
+                      className="flex-none text-muted-foreground hover:text-foreground"
                     />
                   }
                 >

From be307a487c9ba139099594dd5f068d441db3d9e2 Mon Sep 17 00:00:00 2001
From: Bil0000 <62337003+Bil0000@users.noreply.github.com>
Date: Thu, 17 Sep 2026 17:53:12 +0200
Subject: [PATCH 7/7] fix(web): preserve the compact project clone banner

---
 apps/web/src/components/ChatView.tsx          |  4 +++-
 .../src/components/chat/ComposerBanner.tsx    |  5 ++++-
 .../components/chat/ComposerBannerStack.tsx   | 19 +++++++++++++++----
 3 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx
index ba9daed83ac9..22cb1ac1d6ab 100644
--- a/apps/web/src/components/ChatView.tsx
+++ b/apps/web/src/components/ChatView.tsx
@@ -2165,6 +2165,7 @@ export default function ChatView(props: ChatViewProps) {
       return {
         id: `project-clone:${projectId}`,
         variant: "info",
+        compact: true,
         priority: "activity",
         icon: <DownloadIcon />,
         title: `Cloning ${name}`,
@@ -2188,6 +2189,7 @@ export default function ChatView(props: ChatViewProps) {
     return {
       id: `project-clone:${projectId}`,
       variant: cancelled ? "warning" : "error",
+      compact: true,
       icon: <DownloadIcon />,
       title: cancelled ? `Cancelled cloning ${name}` : `Failed to clone ${name}`,
       description: cancelled ? "Retry to bring in the repository." : activeProjectClone.error,
@@ -2202,7 +2204,7 @@ export default function ChatView(props: ChatViewProps) {
           </Button>
           <Button
             size="xs"
-            variant="default"
+            variant="ghost"
             onClick={() =>
               void runProjectCloneAction("Failed to retry clone", () =>
                 retryProjectClone({ environmentId, input: { projectId } }),
diff --git a/apps/web/src/components/chat/ComposerBanner.tsx b/apps/web/src/components/chat/ComposerBanner.tsx
index 88c085aa6cb5..cd1d4bd6be42 100644
--- a/apps/web/src/components/chat/ComposerBanner.tsx
+++ b/apps/web/src/components/chat/ComposerBanner.tsx
@@ -183,7 +183,7 @@ function Row({
   layout = "inline",
   ...props
 }: useRender.ComponentProps<"div"> & {
-  layout?: "inline" | "wrap-actions" | "approval";
+  layout?: "inline" | "wrap-actions" | "wrap-actions-narrow" | "approval";
 }) {
   const rowProps = {
     className: cn(
@@ -192,6 +192,8 @@ function Row({
       "[&:is(button)]:cursor-pointer [&:is(button)]:rounded-[0.5rem] [&:is(button)]:focus-visible:outline-2 [&:is(button)]:focus-visible:-outline-offset-2 [&:is(button)]:focus-visible:outline-ring",
       layout === "wrap-actions" &&
         "@max-[400px]:*:data-[slot=composer-banner-content]:min-h-(--composer-banner-icon-column)",
+      layout === "wrap-actions-narrow" &&
+        "@max-[320px]:*:data-[slot=composer-banner-content]:min-h-(--composer-banner-icon-column)",
       layout === "approval" && "items-start gap-x-2 gap-y-3",
       className,
     ),
@@ -256,6 +258,7 @@ function Actions({ className, ...props }: ComponentProps<"span">) {
         "col-start-3 row-start-1 flex flex-wrap items-center justify-end gap-1",
         "group-data-[composer-banner-layout=approval]/banner-row:self-center group-data-[composer-banner-layout=approval]/banner-row:gap-1.5 @max-[560px]:group-data-[composer-banner-layout=approval]/banner-row:col-start-2 @max-[560px]:group-data-[composer-banner-layout=approval]/banner-row:col-end-4 @max-[560px]:group-data-[composer-banner-layout=approval]/banner-row:row-start-2",
         "@max-[400px]:group-data-[composer-banner-layout=wrap-actions]/banner-row:has-[>:nth-child(2)]:col-start-2 @max-[400px]:group-data-[composer-banner-layout=wrap-actions]/banner-row:has-[>:nth-child(2)]:col-end-4 @max-[400px]:group-data-[composer-banner-layout=wrap-actions]/banner-row:has-[>:nth-child(2)]:row-start-2 @max-[400px]:group-data-[composer-banner-layout=wrap-actions]/banner-row:has-[>:nth-child(2)]:justify-end",
+        "@max-[320px]:group-data-[composer-banner-layout=wrap-actions-narrow]/banner-row:has-[>:nth-child(2)]:col-start-2 @max-[320px]:group-data-[composer-banner-layout=wrap-actions-narrow]/banner-row:has-[>:nth-child(2)]:col-end-4 @max-[320px]:group-data-[composer-banner-layout=wrap-actions-narrow]/banner-row:has-[>:nth-child(2)]:row-start-2 @max-[320px]:group-data-[composer-banner-layout=wrap-actions-narrow]/banner-row:has-[>:nth-child(2)]:-ms-2 @max-[320px]:group-data-[composer-banner-layout=wrap-actions-narrow]/banner-row:has-[>:nth-child(2)]:justify-start",
         className,
       )}
       {...props}
diff --git a/apps/web/src/components/chat/ComposerBannerStack.tsx b/apps/web/src/components/chat/ComposerBannerStack.tsx
index e2d268ef5683..b47790b96039 100644
--- a/apps/web/src/components/chat/ComposerBannerStack.tsx
+++ b/apps/web/src/components/chat/ComposerBannerStack.tsx
@@ -13,6 +13,7 @@ export interface ComposerBannerStackItem {
   readonly id: string;
   readonly variant: ComposerBannerVariant;
   readonly priority?: "urgent" | "activity" | "notice";
+  readonly compact?: boolean;
   readonly icon: ReactNode;
   readonly title: ReactNode;
   readonly description?: ReactNode;
@@ -270,15 +271,22 @@ function ComposerBannerStackAlert({
       variant={item.variant}
       density="comfortable"
     >
-      <ComposerBanner.Row layout="wrap-actions">
+      <ComposerBanner.Row layout={item.compact ? "wrap-actions-narrow" : "wrap-actions"}>
         <ComposerBanner.Icon className="h-(--composer-banner-icon-column) self-start">
           {item.icon}
         </ComposerBanner.Icon>
         <ComposerBanner.Content className="whitespace-nowrap">
           <span className="min-w-0 truncate font-medium leading-7 sm:leading-6">{item.title}</span>
           {item.description ? (
-            <span className="flex min-w-8 flex-1 items-center gap-1">
-              <span className="min-w-0 truncate text-muted-foreground">{item.description}</span>
+            <span className={item.compact ? "contents" : "flex min-w-8 flex-1 items-center gap-1"}>
+              <span
+                className={cn(
+                  "min-w-0 truncate text-muted-foreground",
+                  item.compact && "shrink-[9999] @max-[400px]:sr-only",
+                )}
+              >
+                {item.description}
+              </span>
               <Popover>
                 <PopoverTrigger
                   openOnHover
@@ -287,7 +295,10 @@ function ComposerBannerStackAlert({
                       size="icon-xs"
                       variant="ghost"
                       aria-label="Show notice details"
-                      className="flex-none text-muted-foreground hover:text-foreground"
+                      className={cn(
+                        "flex-none text-muted-foreground hover:text-foreground",
+                        item.compact && "hidden @max-[400px]:inline-flex",
+                      )}
                     />
                   }
                 >