From a32932c2137ba7ab5b09c20d0762392ed71c7178 Mon Sep 17 00:00:00 2001
From: shivam <91240327+shivamhwp@users.noreply.github.com>
Date: Wed, 11 Nov 2026 13:14:43 +0000
Subject: [PATCH 1/6] fix(web): composer notice buttons line up under the title
 when they wrap

On a narrow composer a notice's buttons wrap to a second line. That line
was pushed to the right edge, so the buttons sat under nothing. They now
start under the title, and the dismiss button and the "+N" count stay at
the row's end. A title too long for the first line also stays beside its
icon instead of dropping below it.

Co-Authored-By: Claude Fable 5.2 <noreply@anthropic.com>
---
 apps/web/src/components/chat/ComposerBanner.tsx  |  6 ++++--
 .../src/components/chat/ComposerBannerStack.tsx  | 16 ++++++++++------
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/apps/web/src/components/chat/ComposerBanner.tsx b/apps/web/src/components/chat/ComposerBanner.tsx
index 1422f0d580390..261c75763ec51 100644
--- a/apps/web/src/components/chat/ComposerBanner.tsx
+++ b/apps/web/src/components/chat/ComposerBanner.tsx
@@ -133,8 +133,9 @@ function Row({
       "group/banner-row grid min-h-4 w-full min-w-0 grid-cols-[var(--composer-banner-icon-column)_minmax(0,1fr)_auto] items-center gap-x-2 text-start",
       "not-has-[>[data-slot=composer-banner-actions]]:grid-cols-[var(--composer-banner-icon-column)_minmax(0,1fr)]",
       "[&:is(button)]:cursor-pointer [&:is(button)]:rounded-xl [&:is(button)]:hover:bg-foreground/5 [&:is(button)]:focus-visible:outline-2 [&:is(button)]:focus-visible:-outline-offset-2 [&:is(button)]:focus-visible:outline-ring",
+      // The icon hangs in the row's start padding, so actions that wrap start under the title.
       layout === "wrap-actions" &&
-        "flex flex-wrap *:data-[slot=composer-banner-content]:max-w-[calc(100%-var(--composer-banner-icon-column)-var(--spacing))] *:data-[slot=composer-banner-content]:grow",
+        "flex flex-wrap ps-(--composer-banner-text-inset) [--composer-banner-text-inset:calc(var(--composer-banner-icon-column)+--spacing(2))] *:data-[slot=composer-banner-content]:max-w-full *:data-[slot=composer-banner-content]:grow-999 *:data-[slot=composer-banner-icon]:-ms-(--composer-banner-text-inset)",
       layout === "approval" && "items-start gap-x-2 gap-y-3",
       className,
     ),
@@ -189,7 +190,8 @@ function Actions({ className, ...props }: ComponentProps<"span">) {
       className={cn(
         "col-start-3 row-start-1 flex flex-wrap items-center justify-end gap-1.5",
         "group-data-[composer-banner-layout=approval]/banner-row:self-center @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",
-        "group-data-[composer-banner-layout=wrap-actions]/banner-row:ms-auto",
+        // Beside the title this is as wide as its buttons; wrapped, it fills the line.
+        "group-data-[composer-banner-layout=wrap-actions]/banner-row:grow group-data-[composer-banner-layout=wrap-actions]/banner-row:justify-start",
         className,
       )}
       {...props}
diff --git a/apps/web/src/components/chat/ComposerBannerStack.tsx b/apps/web/src/components/chat/ComposerBannerStack.tsx
index 597168973d7f8..3196c71d592db 100644
--- a/apps/web/src/components/chat/ComposerBannerStack.tsx
+++ b/apps/web/src/components/chat/ComposerBannerStack.tsx
@@ -249,13 +249,17 @@ function NoticeCard({
         </ComposerBanner.Content>
         {item.actions || item.onDismiss || overflow ? (
           <ComposerBanner.Actions className="min-w-14 sm:min-w-12">
-            {overflow}
             {item.actions}
-            {item.onDismiss ? (
-              <ComposerBanner.Dismiss
-                aria-label={item.dismissLabel ?? "Dismiss warning"}
-                onClick={item.onDismiss}
-              />
+            {overflow || item.onDismiss ? (
+              <span className="ms-auto flex items-center gap-1.5">
+                {overflow}
+                {item.onDismiss ? (
+                  <ComposerBanner.Dismiss
+                    aria-label={item.dismissLabel ?? "Dismiss warning"}
+                    onClick={item.onDismiss}
+                  />
+                ) : null}
+              </span>
             ) : null}
           </ComposerBanner.Actions>
         ) : null}

From 6ac10c5fb05c3a2e5c4785538c28c649d471b3c9 Mon Sep 17 00:00:00 2001
From: shivam <91240327+shivamhwp@users.noreply.github.com>
Date: Thu, 12 Nov 2026 02:02:29 +0000
Subject: [PATCH 2/6] fix(web): notice dismiss stays on the title line when
 buttons wrap

The X and the +N count now sit beside the title, and a notice with a
description shows one details button that carries the title too.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../src/components/chat/ComposerBanner.tsx    |  8 +-
 .../components/chat/ComposerBannerStack.tsx   | 86 +++++++++++--------
 2 files changed, 51 insertions(+), 43 deletions(-)

diff --git a/apps/web/src/components/chat/ComposerBanner.tsx b/apps/web/src/components/chat/ComposerBanner.tsx
index 261c75763ec51..7418a436db49f 100644
--- a/apps/web/src/components/chat/ComposerBanner.tsx
+++ b/apps/web/src/components/chat/ComposerBanner.tsx
@@ -133,9 +133,8 @@ function Row({
       "group/banner-row grid min-h-4 w-full min-w-0 grid-cols-[var(--composer-banner-icon-column)_minmax(0,1fr)_auto] items-center gap-x-2 text-start",
       "not-has-[>[data-slot=composer-banner-actions]]:grid-cols-[var(--composer-banner-icon-column)_minmax(0,1fr)]",
       "[&:is(button)]:cursor-pointer [&:is(button)]:rounded-xl [&:is(button)]:hover:bg-foreground/5 [&:is(button)]:focus-visible:outline-2 [&:is(button)]:focus-visible:-outline-offset-2 [&:is(button)]:focus-visible:outline-ring",
-      // The icon hangs in the row's start padding, so actions that wrap start under the title.
-      layout === "wrap-actions" &&
-        "flex flex-wrap ps-(--composer-banner-text-inset) [--composer-banner-text-inset:calc(var(--composer-banner-icon-column)+--spacing(2))] *:data-[slot=composer-banner-content]:max-w-full *:data-[slot=composer-banner-content]:grow-999 *:data-[slot=composer-banner-icon]:-ms-(--composer-banner-text-inset)",
+      // Buttons wrap below the title, so the icon and the end controls hold the first line.
+      layout === "wrap-actions" && "items-start",
       layout === "approval" && "items-start gap-x-2 gap-y-3",
       className,
     ),
@@ -157,6 +156,7 @@ function Icon({ className, ...props }: ComponentProps<"span">) {
       className={cn(
         "col-start-1 row-start-1 flex w-(--composer-banner-icon-column) min-w-0 flex-none items-center justify-center text-(--surface-tint) [&>svg]:size-3",
         "group-data-[composer-banner-layout=approval]/banner-row:pt-0.5 group-data-[composer-banner-layout=approval]/banner-row:text-warning-foreground group-data-[composer-banner-layout=approval]/banner-row:[&>svg]:size-[13px]",
+        "group-data-[composer-banner-layout=wrap-actions]/banner-row:h-7 sm:group-data-[composer-banner-layout=wrap-actions]/banner-row:h-6",
         className,
       )}
       {...props}
@@ -190,8 +190,6 @@ function Actions({ className, ...props }: ComponentProps<"span">) {
       className={cn(
         "col-start-3 row-start-1 flex flex-wrap items-center justify-end gap-1.5",
         "group-data-[composer-banner-layout=approval]/banner-row:self-center @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",
-        // Beside the title this is as wide as its buttons; wrapped, it fills the line.
-        "group-data-[composer-banner-layout=wrap-actions]/banner-row:grow group-data-[composer-banner-layout=wrap-actions]/banner-row:justify-start",
         className,
       )}
       {...props}
diff --git a/apps/web/src/components/chat/ComposerBannerStack.tsx b/apps/web/src/components/chat/ComposerBannerStack.tsx
index 3196c71d592db..9ecd82eb09fcf 100644
--- a/apps/web/src/components/chat/ComposerBannerStack.tsx
+++ b/apps/web/src/components/chat/ComposerBannerStack.tsx
@@ -103,11 +103,13 @@ export function NoticeText({
   className,
   detailsLabel,
   details,
+  detailsHeading,
 }: {
   readonly children: ReactNode;
   readonly className: string;
   readonly detailsLabel: string;
   readonly details?: ReactNode;
+  readonly detailsHeading?: ReactNode;
 }) {
   const textRef = useRef<HTMLSpanElement>(null);
   const detailsRef = useRef<HTMLButtonElement>(null);
@@ -194,7 +196,10 @@ export function NoticeText({
             side="top"
             className="max-w-[min(30rem,calc(100vw-2rem))] whitespace-normal wrap-anywhere [--inline-button-text-align:start] [--inline-button-white-space:normal] [&_[data-slot=inline-button]]:max-w-full"
           >
-            <ComposerBanner.Scroll>{details ?? children}</ComposerBanner.Scroll>
+            <ComposerBanner.Scroll>
+              {detailsHeading}
+              {details ?? children}
+            </ComposerBanner.Scroll>
           </PopoverPopup>
         </Popover>
       ) : null}
@@ -222,44 +227,49 @@ function NoticeCard({
     >
       <ComposerBanner.Row layout="wrap-actions">
         <ComposerBanner.Icon>{item.icon}</ComposerBanner.Icon>
-        <ComposerBanner.Content className="whitespace-nowrap">
-          <NoticeText
-            detailsLabel={
-              typeof item.title === "string"
-                ? `Show full title: ${item.title}`
-                : "Show title details"
-            }
-            className="min-w-0 truncate text-foreground"
-          >
-            {item.title}
-          </NoticeText>
-          {item.description ? (
-            <NoticeText
-              detailsLabel={
-                typeof item.title === "string"
-                  ? `Show details: ${item.title}`
-                  : "Show notice details"
-              }
-              details={item.descriptionDetails}
-              className="w-0 min-w-0 grow truncate font-medium text-muted-foreground @max-[400px]:sr-only"
-            >
-              {item.description}
-            </NoticeText>
+        <span className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1.5">
+          <ComposerBanner.Content className="min-h-7 max-w-full grow-999 whitespace-nowrap sm:min-h-6">
+            {item.description ? (
+              <>
+                <span className="min-w-0 truncate text-foreground">{item.title}</span>
+                <NoticeText
+                  detailsLabel={
+                    typeof item.title === "string"
+                      ? `Show details: ${item.title}`
+                      : "Show notice details"
+                  }
+                  details={item.descriptionDetails}
+                  detailsHeading={<span className="block text-foreground">{item.title}</span>}
+                  className="w-0 min-w-0 grow truncate font-medium text-muted-foreground @max-[400px]:sr-only"
+                >
+                  {item.description}
+                </NoticeText>
+              </>
+            ) : (
+              <NoticeText
+                detailsLabel={
+                  typeof item.title === "string"
+                    ? `Show full title: ${item.title}`
+                    : "Show title details"
+                }
+                className="min-w-0 truncate text-foreground"
+              >
+                {item.title}
+              </NoticeText>
+            )}
+          </ComposerBanner.Content>
+          {item.actions ? (
+            <span className="flex flex-wrap items-center gap-1.5">{item.actions}</span>
           ) : null}
-        </ComposerBanner.Content>
-        {item.actions || item.onDismiss || overflow ? (
-          <ComposerBanner.Actions className="min-w-14 sm:min-w-12">
-            {item.actions}
-            {overflow || item.onDismiss ? (
-              <span className="ms-auto flex items-center gap-1.5">
-                {overflow}
-                {item.onDismiss ? (
-                  <ComposerBanner.Dismiss
-                    aria-label={item.dismissLabel ?? "Dismiss warning"}
-                    onClick={item.onDismiss}
-                  />
-                ) : null}
-              </span>
+        </span>
+        {overflow || item.onDismiss ? (
+          <ComposerBanner.Actions>
+            {overflow}
+            {item.onDismiss ? (
+              <ComposerBanner.Dismiss
+                aria-label={item.dismissLabel ?? "Dismiss warning"}
+                onClick={item.onDismiss}
+              />
             ) : null}
           </ComposerBanner.Actions>
         ) : null}

From b240add0694c45c7088eaa847c144ca3e584141e Mon Sep 17 00:00:00 2001
From: shivam <91240327+shivamhwp@users.noreply.github.com>
Date: Thu, 12 Nov 2026 02:41:28 +0000
Subject: [PATCH 3/6] fix(web): narrow notices stack their description and
 buttons under the title

Below 480px a notice shows its title and dismiss on the first line, then
its description in full and its buttons, all from the title's edge. The
details button is gone there because nothing is cut off.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../web/src/components/chat/ComposerBanner.tsx |  1 -
 .../components/chat/ComposerBannerStack.tsx    | 18 +++++++++++-------
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/apps/web/src/components/chat/ComposerBanner.tsx b/apps/web/src/components/chat/ComposerBanner.tsx
index 7418a436db49f..259165109ad19 100644
--- a/apps/web/src/components/chat/ComposerBanner.tsx
+++ b/apps/web/src/components/chat/ComposerBanner.tsx
@@ -156,7 +156,6 @@ function Icon({ className, ...props }: ComponentProps<"span">) {
       className={cn(
         "col-start-1 row-start-1 flex w-(--composer-banner-icon-column) min-w-0 flex-none items-center justify-center text-(--surface-tint) [&>svg]:size-3",
         "group-data-[composer-banner-layout=approval]/banner-row:pt-0.5 group-data-[composer-banner-layout=approval]/banner-row:text-warning-foreground group-data-[composer-banner-layout=approval]/banner-row:[&>svg]:size-[13px]",
-        "group-data-[composer-banner-layout=wrap-actions]/banner-row:h-7 sm:group-data-[composer-banner-layout=wrap-actions]/banner-row:h-6",
         className,
       )}
       {...props}
diff --git a/apps/web/src/components/chat/ComposerBannerStack.tsx b/apps/web/src/components/chat/ComposerBannerStack.tsx
index 9ecd82eb09fcf..ea9f9deb58a9d 100644
--- a/apps/web/src/components/chat/ComposerBannerStack.tsx
+++ b/apps/web/src/components/chat/ComposerBannerStack.tsx
@@ -181,6 +181,7 @@ export function NoticeText({
             render={
               <Button
                 ref={detailsRef}
+                data-notice-details=""
                 size="icon-xs"
                 variant="ghost-muted"
                 aria-label={detailsLabel}
@@ -226,12 +227,15 @@ function NoticeCard({
       data-chat-composer-collapsed-controls="true"
     >
       <ComposerBanner.Row layout="wrap-actions">
-        <ComposerBanner.Icon>{item.icon}</ComposerBanner.Icon>
-        <span className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1.5">
-          <ComposerBanner.Content className="min-h-7 max-w-full grow-999 whitespace-nowrap sm:min-h-6">
+        {/* Narrow cards stack: title and dismiss, then the description in full, then the buttons. */}
+        <ComposerBanner.Icon className="h-lh @min-[480px]:h-7 @min-[480px]:sm:h-6">
+          {item.icon}
+        </ComposerBanner.Icon>
+        <span className="flex min-w-0 flex-col items-start gap-2 @min-[480px]:flex-row @min-[480px]:flex-wrap @min-[480px]:items-center @min-[480px]:gap-x-2 @min-[480px]:gap-y-1.5">
+          <ComposerBanner.Content className="w-full max-w-full flex-col items-start gap-0.5 @max-[480px]:**:data-notice-details:hidden @min-[480px]:min-h-7 @min-[480px]:w-auto @min-[480px]:grow-999 @min-[480px]:flex-row @min-[480px]:items-center @min-[480px]:gap-2 @min-[480px]:whitespace-nowrap @min-[480px]:sm:min-h-6">
             {item.description ? (
               <>
-                <span className="min-w-0 truncate text-foreground">{item.title}</span>
+                <span className="min-w-0 text-foreground @min-[480px]:truncate">{item.title}</span>
                 <NoticeText
                   detailsLabel={
                     typeof item.title === "string"
@@ -240,7 +244,7 @@ function NoticeCard({
                   }
                   details={item.descriptionDetails}
                   detailsHeading={<span className="block text-foreground">{item.title}</span>}
-                  className="w-0 min-w-0 grow truncate font-medium text-muted-foreground @max-[400px]:sr-only"
+                  className="min-w-0 font-medium text-muted-foreground @min-[480px]:w-0 @min-[480px]:grow @min-[480px]:truncate"
                 >
                   {item.description}
                 </NoticeText>
@@ -252,7 +256,7 @@ function NoticeCard({
                     ? `Show full title: ${item.title}`
                     : "Show title details"
                 }
-                className="min-w-0 truncate text-foreground"
+                className="min-w-0 text-foreground @min-[480px]:truncate"
               >
                 {item.title}
               </NoticeText>
@@ -263,7 +267,7 @@ function NoticeCard({
           ) : null}
         </span>
         {overflow || item.onDismiss ? (
-          <ComposerBanner.Actions>
+          <ComposerBanner.Actions className="h-lh flex-nowrap @min-[480px]:h-auto">
             {overflow}
             {item.onDismiss ? (
               <ComposerBanner.Dismiss

From 0435fd226a832393b07a12831a1038dc67f4355c Mon Sep 17 00:00:00 2001
From: shivam <91240327+shivamhwp@users.noreply.github.com>
Date: Thu, 12 Nov 2026 03:22:52 +0000
Subject: [PATCH 4/6] fix(web): narrow notices show only the title, dismiss and
 buttons

Below 480px the description is hidden again, and a body-size notice's
icon is as large as its dismiss button.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../components/chat/ComposerBannerStack.tsx    | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/components/chat/ComposerBannerStack.tsx b/apps/web/src/components/chat/ComposerBannerStack.tsx
index ea9f9deb58a9d..8f0707621b7d1 100644
--- a/apps/web/src/components/chat/ComposerBannerStack.tsx
+++ b/apps/web/src/components/chat/ComposerBannerStack.tsx
@@ -6,6 +6,7 @@ import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
 import { Popover, PopoverPopup, PopoverTrigger } from "../ui/popover";
 import { ComposerBanner, type ComposerBannerVariant } from "./ComposerBanner";
 import { observeResize } from "~/lib/observeResize";
+import { cn } from "~/lib/utils";
 
 /**
  * Where a notice sits in the stack. The machine comes first, then what needs you; the
@@ -224,15 +225,24 @@ function NoticeCard({
       textSize={item.textSize ?? "compact"}
       detached={detached}
       density="comfortable"
+      // Body-size titles take an icon as large as the dismiss button's.
+      className={
+        item.textSize === "body" ? "[--composer-banner-icon-column:--spacing(3.5)]" : undefined
+      }
       data-chat-composer-collapsed-controls="true"
     >
       <ComposerBanner.Row layout="wrap-actions">
-        {/* Narrow cards stack: title and dismiss, then the description in full, then the buttons. */}
-        <ComposerBanner.Icon className="h-lh @min-[480px]:h-7 @min-[480px]:sm:h-6">
+        {/* Narrow cards stack the title and dismiss over the buttons, and drop the description. */}
+        <ComposerBanner.Icon
+          className={cn(
+            "h-lh @min-[480px]:h-7 @min-[480px]:sm:h-6",
+            item.textSize === "body" && "[&>svg]:size-3.5",
+          )}
+        >
           {item.icon}
         </ComposerBanner.Icon>
         <span className="flex min-w-0 flex-col items-start gap-2 @min-[480px]:flex-row @min-[480px]:flex-wrap @min-[480px]:items-center @min-[480px]:gap-x-2 @min-[480px]:gap-y-1.5">
-          <ComposerBanner.Content className="w-full max-w-full flex-col items-start gap-0.5 @max-[480px]:**:data-notice-details:hidden @min-[480px]:min-h-7 @min-[480px]:w-auto @min-[480px]:grow-999 @min-[480px]:flex-row @min-[480px]:items-center @min-[480px]:gap-2 @min-[480px]:whitespace-nowrap @min-[480px]:sm:min-h-6">
+          <ComposerBanner.Content className="w-full max-w-full @max-[480px]:**:data-notice-details:hidden @min-[480px]:min-h-7 @min-[480px]:w-auto @min-[480px]:grow-999 @min-[480px]:whitespace-nowrap @min-[480px]:sm:min-h-6">
             {item.description ? (
               <>
                 <span className="min-w-0 text-foreground @min-[480px]:truncate">{item.title}</span>
@@ -244,7 +254,7 @@ function NoticeCard({
                   }
                   details={item.descriptionDetails}
                   detailsHeading={<span className="block text-foreground">{item.title}</span>}
-                  className="min-w-0 font-medium text-muted-foreground @min-[480px]:w-0 @min-[480px]:grow @min-[480px]:truncate"
+                  className="w-0 min-w-0 grow truncate font-medium text-muted-foreground @max-[480px]:sr-only"
                 >
                   {item.description}
                 </NoticeText>

From 877fe8f8ad94c6bb68ab7066ef72f7513cacd711 Mon Sep 17 00:00:00 2001
From: shivam <91240327+shivamhwp@users.noreply.github.com>
Date: Thu, 12 Nov 2026 03:46:48 +0000
Subject: [PATCH 5/6] fix(web): narrow notices follow the request card's header
 and footer

Below 480px a notice is a header row (icon, title, +N and dismiss) over a
right-aligned footer of its buttons, like ComposerRequestCard. Wider
notices keep the one-line status row and its 12px icon.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../src/components/chat/ComposerBanner.tsx    |  5 +-
 .../components/chat/ComposerBannerStack.tsx   | 73 ++++++++-----------
 2 files changed, 33 insertions(+), 45 deletions(-)

diff --git a/apps/web/src/components/chat/ComposerBanner.tsx b/apps/web/src/components/chat/ComposerBanner.tsx
index 259165109ad19..a122a84001f1d 100644
--- a/apps/web/src/components/chat/ComposerBanner.tsx
+++ b/apps/web/src/components/chat/ComposerBanner.tsx
@@ -133,8 +133,9 @@ function Row({
       "group/banner-row grid min-h-4 w-full min-w-0 grid-cols-[var(--composer-banner-icon-column)_minmax(0,1fr)_auto] items-center gap-x-2 text-start",
       "not-has-[>[data-slot=composer-banner-actions]]:grid-cols-[var(--composer-banner-icon-column)_minmax(0,1fr)]",
       "[&:is(button)]:cursor-pointer [&:is(button)]:rounded-xl [&:is(button)]:hover:bg-foreground/5 [&:is(button)]:focus-visible:outline-2 [&:is(button)]:focus-visible:-outline-offset-2 [&:is(button)]:focus-visible:outline-ring",
-      // Buttons wrap below the title, so the icon and the end controls hold the first line.
-      layout === "wrap-actions" && "items-start",
+      // Narrow notices follow the request card: a header row over a right-aligned footer of buttons.
+      layout === "wrap-actions" &&
+        "flex flex-wrap items-start gap-y-2 @min-[480px]:flex-nowrap @min-[480px]:items-center",
       layout === "approval" && "items-start gap-x-2 gap-y-3",
       className,
     ),
diff --git a/apps/web/src/components/chat/ComposerBannerStack.tsx b/apps/web/src/components/chat/ComposerBannerStack.tsx
index 8f0707621b7d1..e1b2f3bf84989 100644
--- a/apps/web/src/components/chat/ComposerBannerStack.tsx
+++ b/apps/web/src/components/chat/ComposerBannerStack.tsx
@@ -6,7 +6,6 @@ import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
 import { Popover, PopoverPopup, PopoverTrigger } from "../ui/popover";
 import { ComposerBanner, type ComposerBannerVariant } from "./ComposerBanner";
 import { observeResize } from "~/lib/observeResize";
-import { cn } from "~/lib/utils";
 
 /**
  * Where a notice sits in the stack. The machine comes first, then what needs you; the
@@ -225,57 +224,45 @@ function NoticeCard({
       textSize={item.textSize ?? "compact"}
       detached={detached}
       density="comfortable"
-      // Body-size titles take an icon as large as the dismiss button's.
-      className={
-        item.textSize === "body" ? "[--composer-banner-icon-column:--spacing(3.5)]" : undefined
-      }
       data-chat-composer-collapsed-controls="true"
     >
       <ComposerBanner.Row layout="wrap-actions">
-        {/* Narrow cards stack the title and dismiss over the buttons, and drop the description. */}
-        <ComposerBanner.Icon
-          className={cn(
-            "h-lh @min-[480px]:h-7 @min-[480px]:sm:h-6",
-            item.textSize === "body" && "[&>svg]:size-3.5",
-          )}
-        >
-          {item.icon}
-        </ComposerBanner.Icon>
-        <span className="flex min-w-0 flex-col items-start gap-2 @min-[480px]:flex-row @min-[480px]:flex-wrap @min-[480px]:items-center @min-[480px]:gap-x-2 @min-[480px]:gap-y-1.5">
-          <ComposerBanner.Content className="w-full max-w-full @max-[480px]:**:data-notice-details:hidden @min-[480px]:min-h-7 @min-[480px]:w-auto @min-[480px]:grow-999 @min-[480px]:whitespace-nowrap @min-[480px]:sm:min-h-6">
-            {item.description ? (
-              <>
-                <span className="min-w-0 text-foreground @min-[480px]:truncate">{item.title}</span>
-                <NoticeText
-                  detailsLabel={
-                    typeof item.title === "string"
-                      ? `Show details: ${item.title}`
-                      : "Show notice details"
-                  }
-                  details={item.descriptionDetails}
-                  detailsHeading={<span className="block text-foreground">{item.title}</span>}
-                  className="w-0 min-w-0 grow truncate font-medium text-muted-foreground @max-[480px]:sr-only"
-                >
-                  {item.description}
-                </NoticeText>
-              </>
-            ) : (
+        <ComposerBanner.Icon className="h-lh @min-[480px]:h-auto">{item.icon}</ComposerBanner.Icon>
+        <ComposerBanner.Content className="flex-1 @max-[480px]:**:data-notice-details:hidden @min-[480px]:whitespace-nowrap">
+          {item.description ? (
+            <>
+              <span className="min-w-0 text-foreground @min-[480px]:truncate">{item.title}</span>
               <NoticeText
                 detailsLabel={
                   typeof item.title === "string"
-                    ? `Show full title: ${item.title}`
-                    : "Show title details"
+                    ? `Show details: ${item.title}`
+                    : "Show notice details"
                 }
-                className="min-w-0 text-foreground @min-[480px]:truncate"
+                details={item.descriptionDetails}
+                detailsHeading={<span className="block text-foreground">{item.title}</span>}
+                className="w-0 min-w-0 grow truncate font-medium text-muted-foreground @max-[480px]:sr-only"
               >
-                {item.title}
+                {item.description}
               </NoticeText>
-            )}
-          </ComposerBanner.Content>
-          {item.actions ? (
-            <span className="flex flex-wrap items-center gap-1.5">{item.actions}</span>
-          ) : null}
-        </span>
+            </>
+          ) : (
+            <NoticeText
+              detailsLabel={
+                typeof item.title === "string"
+                  ? `Show full title: ${item.title}`
+                  : "Show title details"
+              }
+              className="min-w-0 text-foreground @min-[480px]:truncate"
+            >
+              {item.title}
+            </NoticeText>
+          )}
+        </ComposerBanner.Content>
+        {item.actions ? (
+          <span className="order-last flex basis-full flex-wrap items-center justify-end gap-2 @min-[480px]:order-none @min-[480px]:basis-auto @min-[480px]:gap-1.5">
+            {item.actions}
+          </span>
+        ) : null}
         {overflow || item.onDismiss ? (
           <ComposerBanner.Actions className="h-lh flex-nowrap @min-[480px]:h-auto">
             {overflow}

From eba67df2484065909dbfa8b1dd68e4add71ec606 Mon Sep 17 00:00:00 2001
From: shivam <91240327+shivamhwp@users.noreply.github.com>
Date: Thu, 12 Nov 2026 03:59:21 +0000
Subject: [PATCH 6/6] fix(web): wide notices keep the status row's gap before
 dismiss

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/web/src/components/chat/ComposerBannerStack.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/src/components/chat/ComposerBannerStack.tsx b/apps/web/src/components/chat/ComposerBannerStack.tsx
index e1b2f3bf84989..3a943398ab5f3 100644
--- a/apps/web/src/components/chat/ComposerBannerStack.tsx
+++ b/apps/web/src/components/chat/ComposerBannerStack.tsx
@@ -264,7 +264,7 @@ function NoticeCard({
           </span>
         ) : null}
         {overflow || item.onDismiss ? (
-          <ComposerBanner.Actions className="h-lh flex-nowrap @min-[480px]:h-auto">
+          <ComposerBanner.Actions className="h-lh flex-nowrap @min-[480px]:-ms-0.5 @min-[480px]:h-auto">
             {overflow}
             {item.onDismiss ? (
               <ComposerBanner.Dismiss