From ea80fe495b2fc50dc664b96f706eeb8ddc447943 Mon Sep 17 00:00:00 2001
From: Julius Marminge <julius0216@outlook.com>
Date: Sun, 19 Jul 2026 21:03:40 +0200
Subject: [PATCH 1/3] Fix draft banner stack overlap

Co-authored-by: codex <codex@users.noreply.github.com>
---
 .../chat/ComposerBannerStack.test.tsx         | 34 ++++++++++
 .../components/chat/ComposerBannerStack.tsx   | 65 +++++++++++--------
 2 files changed, 71 insertions(+), 28 deletions(-)
 create mode 100644 apps/web/src/components/chat/ComposerBannerStack.test.tsx

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..db2ba4bbe3a
--- /dev/null
+++ b/apps/web/src/components/chat/ComposerBannerStack.test.tsx
@@ -0,0 +1,34 @@
+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]).not.toContain("absolute");
+    expect(markup.indexOf("stacked warning")).toBeLessThan(markup.indexOf("front warning"));
+  });
+
+  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..f74182792f9 100644
--- a/apps/web/src/components/chat/ComposerBannerStack.tsx
+++ b/apps/web/src/components/chat/ComposerBannerStack.tsx
@@ -101,6 +101,43 @@ export function ComposerBannerStack({ className, items }: ComposerBannerStackPro
             aria-hidden="true"
           />
         ) : null}
+        {hasStack ? (
+          <div
+            data-composer-banner-stack-expanded-items="true"
+            className={cn(
+              "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]",
+            )}
+          >
+            <div className="min-h-0 overflow-hidden">
+              <div
+                className={cn(
+                  "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: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",
+                )}
+              >
+                {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
           className={cn(
             "relative z-10",
@@ -117,34 +154,6 @@ export function ComposerBannerStack({ className, items }: ComposerBannerStackPro
             onDismissRequest={() => requestDismiss(frontItem)}
           />
         </div>
-        {hasStack ? (
-          <div
-            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",
-            )}
-          >
-            {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>
-        ) : null}
       </div>
     </div>
   );

From 01aca05eef8798b38a03d389bf2194a92db4c1e3 Mon Sep 17 00:00:00 2001
From: Julius Marminge <julius0216@outlook.com>
Date: Mon, 20 Jul 2026 00:59:50 +0200
Subject: [PATCH 2/3] Reduce draft headline size to prevent overlap

---
 apps/web/src/components/chat/DraftHeroHeadline.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 ? (

From 90ee1f2ed7410fbf4638b757901b44d840a18e5a Mon Sep 17 00:00:00 2001
From: Julius Marminge <julius0216@outlook.com>
Date: Mon, 20 Jul 2026 01:06:35 +0200
Subject: [PATCH 3/3] Fix composer banner overlap with draft input

- Reorder banner layers so the front banner stays above stacked warnings
- Hide collapsed stacked banners from pointer and focus interactions
---
 .../chat/ComposerBannerStack.test.tsx         |  5 ++-
 .../components/chat/ComposerBannerStack.tsx   | 42 +++++++++----------
 2 files changed, 25 insertions(+), 22 deletions(-)

diff --git a/apps/web/src/components/chat/ComposerBannerStack.test.tsx b/apps/web/src/components/chat/ComposerBannerStack.test.tsx
index db2ba4bbe3a..16fdff64425 100644
--- a/apps/web/src/components/chat/ComposerBannerStack.test.tsx
+++ b/apps/web/src/components/chat/ComposerBannerStack.test.tsx
@@ -22,8 +22,11 @@ describe("ComposerBannerStack", () => {
 
     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("stacked warning")).toBeLessThan(markup.indexOf("front warning"));
+    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", () => {
diff --git a/apps/web/src/components/chat/ComposerBannerStack.tsx b/apps/web/src/components/chat/ComposerBannerStack.tsx
index f74182792f9..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,
         )}
       >
@@ -101,21 +101,37 @@ export function ComposerBannerStack({ className, items }: ComposerBannerStackPro
             aria-hidden="true"
           />
         ) : null}
+        <div
+          className={cn(
+            "relative z-10",
+            exitingItemId === frontItem.id ? "pointer-events-none" : null,
+          )}
+          style={{
+            ...exitTransitionStyle,
+            ...(exitingItemId === frontItem.id ? frontExitStyle : restingStyle),
+          }}
+        >
+          <ComposerBannerStackAlert
+            item={frontItem}
+            exiting={exitingItemId === frontItem.id}
+            onDismissRequest={() => requestDismiss(frontItem)}
+          />
+        </div>
         {hasStack ? (
           <div
             data-composer-banner-stack-expanded-items="true"
             className={cn(
-              "grid grid-rows-[0fr] transition-[grid-template-rows] duration-150 ease-out",
+              "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]",
             )}
           >
             <div className="min-h-0 overflow-hidden">
               <div
                 className={cn(
-                  "pointer-events-none space-y-2 pb-2 opacity-0",
+                  "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: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",
+                  "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",
                 )}
               >
                 {stackedItems.map((item) => (
@@ -138,22 +154,6 @@ export function ComposerBannerStack({ className, items }: ComposerBannerStackPro
             </div>
           </div>
         ) : null}
-        <div
-          className={cn(
-            "relative z-10",
-            exitingItemId === frontItem.id ? "pointer-events-none" : null,
-          )}
-          style={{
-            ...exitTransitionStyle,
-            ...(exitingItemId === frontItem.id ? frontExitStyle : restingStyle),
-          }}
-        >
-          <ComposerBannerStackAlert
-            item={frontItem}
-            exiting={exitingItemId === frontItem.id}
-            onDismissRequest={() => requestDismiss(frontItem)}
-          />
-        </div>
       </div>
     </div>
   );