diff --git a/apps/web/src/components/chat/ComposerBannerStack.test.tsx b/apps/web/src/components/chat/ComposerBannerStack.test.tsx
new file mode 100644
index 00000000000..16fdff64425
--- /dev/null
+++ b/apps/web/src/components/chat/ComposerBannerStack.test.tsx
@@ -0,0 +1,37 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vite-plus/test";
+
+import { ComposerBannerStack, type ComposerBannerStackItem } from "./ComposerBannerStack";
+
+const banner = (id: string): ComposerBannerStackItem => ({
+  id,
+  variant: "warning",
+  icon: <span aria-hidden="true">!</span>,
+  title: `${id} warning`,
+});
+
+describe("ComposerBannerStack", () => {
+  it("keeps expanded banners in layout flow so surrounding content moves out of their way", () => {
+    const markup = renderToStaticMarkup(
+      <ComposerBannerStack items={[banner("front"), banner("stacked")]} />,
+    );
+
+    const expandedItems = markup.match(
+      /<div data-composer-banner-stack-expanded-items="true" class="([^"]+)">/,
+    );
+
+    expect(expandedItems?.[1]).toContain("grid-rows-[0fr]");
+    expect(expandedItems?.[1]).toContain("group-hover/banner-stack:grid-rows-[1fr]");
+    expect(expandedItems?.[1]).toContain("z-20");
+    expect(expandedItems?.[1]).not.toContain("absolute");
+    expect(markup.indexOf("front warning")).toBeLessThan(markup.indexOf("stacked warning"));
+    expect(markup).toContain("invisible pointer-events-none");
+    expect(markup).toContain("group-focus-within/banner-stack:visible");
+  });
+
+  it("does not render an expandable region for a single banner", () => {
+    const markup = renderToStaticMarkup(<ComposerBannerStack items={[banner("front")]} />);
+
+    expect(markup).not.toContain("data-composer-banner-stack-expanded-items");
+  });
+});
diff --git a/apps/web/src/components/chat/ComposerBannerStack.tsx b/apps/web/src/components/chat/ComposerBannerStack.tsx
index 1f82c452b05..d51c23a2f27 100644
--- a/apps/web/src/components/chat/ComposerBannerStack.tsx
+++ b/apps/web/src/components/chat/ComposerBannerStack.tsx
@@ -85,7 +85,7 @@ export function ComposerBannerStack({ className, items }: ComposerBannerStackPro
     <div className={cn("group/banner-stack mx-auto mb-2 max-w-3xl", className)}>
       <div
         className={cn(
-          "relative",
+          "relative flex flex-col-reverse",
           hasStack ? "group-hover/banner-stack:z-50 group-focus-within/banner-stack:z-50" : null,
         )}
       >
@@ -119,30 +119,39 @@ export function ComposerBannerStack({ className, items }: ComposerBannerStackPro
         </div>
         {hasStack ? (
           <div
+            data-composer-banner-stack-expanded-items="true"
             className={cn(
-              "pointer-events-none absolute inset-x-0 bottom-[calc(100%+0.5rem)] z-20 space-y-2 opacity-0",
-              "transition-[opacity,transform] duration-150 ease-out",
-              "translate-y-1 transform-gpu will-change-[opacity,transform]",
-              "group-hover/banner-stack:pointer-events-auto group-hover/banner-stack:translate-y-0 group-hover/banner-stack:opacity-100",
-              "group-focus-within/banner-stack:pointer-events-auto group-focus-within/banner-stack:translate-y-0 group-focus-within/banner-stack:opacity-100",
+              "relative z-20 grid grid-rows-[0fr] transition-[grid-template-rows] duration-150 ease-out",
+              "group-hover/banner-stack:grid-rows-[1fr] group-focus-within/banner-stack:grid-rows-[1fr]",
             )}
           >
-            {stackedItems.map((item) => (
+            <div className="min-h-0 overflow-hidden">
               <div
-                key={item.id}
-                className={cn(exitingItemId === item.id ? "pointer-events-none" : null)}
-                style={{
-                  ...exitTransitionStyle,
-                  ...(exitingItemId === item.id ? stackedExitStyle : restingStyle),
-                }}
+                className={cn(
+                  "invisible pointer-events-none space-y-2 pb-2 opacity-0",
+                  "translate-y-1 transform-gpu transition-[opacity,transform] duration-150 ease-out will-change-[opacity,transform]",
+                  "group-hover/banner-stack:visible group-hover/banner-stack:pointer-events-auto group-hover/banner-stack:translate-y-0 group-hover/banner-stack:opacity-100",
+                  "group-focus-within/banner-stack:visible group-focus-within/banner-stack:pointer-events-auto group-focus-within/banner-stack:translate-y-0 group-focus-within/banner-stack:opacity-100",
+                )}
               >
-                <ComposerBannerStackAlert
-                  item={item}
-                  exiting={exitingItemId === item.id}
-                  onDismissRequest={() => requestDismiss(item)}
-                />
+                {stackedItems.map((item) => (
+                  <div
+                    key={item.id}
+                    className={cn(exitingItemId === item.id ? "pointer-events-none" : null)}
+                    style={{
+                      ...exitTransitionStyle,
+                      ...(exitingItemId === item.id ? stackedExitStyle : restingStyle),
+                    }}
+                  >
+                    <ComposerBannerStackAlert
+                      item={item}
+                      exiting={exitingItemId === item.id}
+                      onDismissRequest={() => requestDismiss(item)}
+                    />
+                  </div>
+                ))}
               </div>
-            ))}
+            </div>
           </div>
         ) : null}
       </div>
diff --git a/apps/web/src/components/chat/DraftHeroHeadline.tsx b/apps/web/src/components/chat/DraftHeroHeadline.tsx
index 32d195d7b2e..6a88fb8da19 100644
--- a/apps/web/src/components/chat/DraftHeroHeadline.tsx
+++ b/apps/web/src/components/chat/DraftHeroHeadline.tsx
@@ -101,7 +101,7 @@ export function DraftHeroHeadline({
   );
 
   return (
-    <h1 className="mx-auto w-full max-w-5xl text-center font-normal text-3xl text-foreground tracking-tight sm:text-5xl">
+    <h1 className="mx-auto w-full max-w-5xl text-center font-normal text-2xl text-foreground tracking-tight sm:text-3xl">
       {hasResolvedProject ? (
         <>What should we build in {projectSelector}?</>
       ) : canChooseProject ? (