fix(web): narrow composer notices use the request card's header and footer

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",
+      // Narrow notices follow the request card: a header row over a right-aligned footer of buttons.
       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 items-start gap-y-2 @min-[480px]:flex-nowrap @min-[480px]:items-center",
       layout === "approval" && "items-start gap-x-2 gap-y-3",
       className,
     ),
@@ -189,7 +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",
-        "group-data-[composer-banner-layout=wrap-actions]/banner-row:ms-auto",
         className,
       )}
       {...props}

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);
@@ -179,6 +181,7 @@ export function NoticeText({
             render={
               <Button
                 ref={detailsRef}
+                data-notice-details=""
                 size="icon-xs"
                 variant="ghost-muted"
                 aria-label={detailsLabel}
@@ -194,7 +197,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}
@@ -221,36 +227,45 @@ function NoticeCard({
       data-chat-composer-collapsed-controls="true"
     >
       <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>
+        <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 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>
+            </>
+          ) : (
             <NoticeText
               detailsLabel={
                 typeof item.title === "string"
-                  ? `Show details: ${item.title}`
-                  : "Show notice details"
+                  ? `Show full title: ${item.title}`
+                  : "Show title details"
               }
-              details={item.descriptionDetails}
-              className="w-0 min-w-0 grow truncate font-medium text-muted-foreground @max-[400px]:sr-only"
+              className="min-w-0 text-foreground @min-[480px]:truncate"
             >
-              {item.description}
+              {item.title}
             </NoticeText>
-          ) : null}
+          )}
         </ComposerBanner.Content>
-        {item.actions || item.onDismiss || overflow ? (
-          <ComposerBanner.Actions className="min-w-14 sm:min-w-12">
-            {overflow}
+        {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]:-ms-0.5 @min-[480px]:h-auto">
+            {overflow}
             {item.onDismiss ? (
               <ComposerBanner.Dismiss
                 aria-label={item.dismissLabel ?? "Dismiss warning"}