From 1e3af8310048f031b5ddca525044b4b1233faa1b Mon Sep 17 00:00:00 2001
From: Arul Sharma <31745423+arul28@users.noreply.github.com>
Date: Mon, 27 Jul 2026 02:51:01 -0400
Subject: [PATCH] Shrink the new-chat ADE logo instead of clipping the hero
 column
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The empty-state logo box is `aspect-ratio: 560/300` + `w-full`, so its height
was purely width-derived and never responded to vertical space. The hero
column had no definite height either, so flex-shrink never engaged: in a short
window the whole column overflowed its `overflow-hidden` wrapper and clipped at
BOTH ends — the top of the logo and the bottom of the activity module.

Make the logo the one flexible row. The column now caps itself with
`max-h-full`, every sibling is `shrink-0`, and the logo carries an explicit
`min-h-[56px]` — which is what actually enables shrinking, since it overrides
the `min-height: auto` that an aspect-ratio box transfers from its width.

The optical lift moves from `-mt-10` on the column into the wrapper's padding
(96px + 40px = 136px). A negative margin escapes the `max-h-full` cap and would
push the column's top back out of the clip, so the two are incompatible. With
`align-items: center` the -40px margin yielded a 20px effective lift, and the
padding form reproduces the resting position exactly: verified pixel-identical
at 1400x1000 before and after.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../components/chat/AgentChatPane.tsx         | 25 ++++++++++++-------
 docs/features/chat/composer-and-ui.md         |  9 +++++++
 2 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/apps/desktop/src/renderer/components/chat/AgentChatPane.tsx b/apps/desktop/src/renderer/components/chat/AgentChatPane.tsx
index 2ae338f42..7b801eb19 100644
--- a/apps/desktop/src/renderer/components/chat/AgentChatPane.tsx
+++ b/apps/desktop/src/renderer/components/chat/AgentChatPane.tsx
@@ -11934,15 +11934,22 @@ export function AgentChatPane({
                   >
                     <div className={cn(
                       "flex min-h-0 flex-1 items-center justify-center overflow-hidden",
-                      appPanelOpen ? "px-3" : "px-6 pb-24",
+                      // The optical lift lives in the padding rather than a negative margin on the
+                      // column, so `max-h-full` below can cap the column without clipping its top.
+                      // 136px = the previous pb-24 (96px) + the removed -mt-10 lift (40px), which
+                      // keeps the resting position pixel-identical whenever there is room to spare.
+                      appPanelOpen ? "px-3" : "px-6 pb-[136px]",
                     )}>
                       <div className={cn(
-                        "flex w-full flex-col items-center gap-3 text-center",
-                        appPanelOpen ? null : "-mt-10 max-w-[820px]",
+                        "flex max-h-full w-full flex-col items-center gap-3 text-center",
+                        appPanelOpen ? null : "max-w-[820px]",
                       )}>
                         <motion.div
                           className={cn(
-                            "relative flex w-full min-w-0 items-center justify-center",
+                            // The logo is the only flexible row: in a short window it absorbs the
+                            // overflow down to a legible floor, so the composer stays visible far
+                            // longer than it did when the whole column was rigid.
+                            "relative flex min-h-[56px] w-full min-w-0 shrink items-center justify-center",
                             appPanelOpen ? "max-w-[360px]" : "max-w-[520px]",
                           )}
                           style={{ aspectRatio: "560 / 300" }}
@@ -11955,14 +11962,14 @@ export function AgentChatPane({
                           />
                         </motion.div>
 
-                        <h2 className="font-sans text-[18px] font-semibold tracking-tight text-fg/80">
+                        <h2 className="shrink-0 font-sans text-[18px] font-semibold tracking-tight text-fg/80">
                           {isOrchestratorDraft ? "Orchestrate a swarm of agents" : "Start a new conversation"}
                         </h2>
 
                         {/* Lane selector pill */}
                         {showWorkspaceChrome && draftLaneSelectorLanes.length > 0 && onLaneChange ? (
                           <motion.div
-                            className="flex justify-center"
+                            className="flex shrink-0 justify-center"
                             exit={{ opacity: 0, transition: { duration: 0.15 } }}
                           >
                             <div className="flex flex-col items-center gap-2">
@@ -12023,7 +12030,7 @@ export function AgentChatPane({
                           </motion.div>
                         ) : showWorkspaceChrome && laneDisplayLabel ? (
                           <motion.div
-                            className="flex items-center gap-2 rounded-full px-4 py-1.5"
+                            className="flex shrink-0 items-center gap-2 rounded-full px-4 py-1.5"
                             style={{ background: "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.08)" }}
                             exit={{ opacity: 0, transition: { duration: 0.15 } }}
                           >
@@ -12043,14 +12050,14 @@ export function AgentChatPane({
 
                         {/* Inline composer for empty state (only when sim drawer closed) */}
                         {!appPanelOpen ? (
-                          <div className="w-full max-w-[820px]">
+                          <div className="w-full shrink-0">
                             {composerWithTypographyRoot}
                           </div>
                         ) : null}
 
                         {isWorkDraftComposer && !appPanelOpen ? (
                           <motion.div
-                            className="flex w-full justify-center"
+                            className="flex w-full shrink-0 justify-center"
                             initial={{ opacity: 0, y: 8 }}
                             animate={{ opacity: 1, y: 0 }}
                             exit={{ opacity: 0, y: 6 }}
diff --git a/docs/features/chat/composer-and-ui.md b/docs/features/chat/composer-and-ui.md
index 216b9a21c..bda448adf 100644
--- a/docs/features/chat/composer-and-ui.md
+++ b/docs/features/chat/composer-and-ui.md
@@ -982,6 +982,15 @@ These modules are pure and unit-testable:
   immediately re-persist with a new timestamp. Normalization
   (`normalizeStoredComposerDraft`) validates every field defensively
   so corrupt stored data degrades gracefully instead of crashing.
+- **Empty-state hero column.** The new-chat hero column in
+  `AgentChatPane` lives in an `overflow-hidden` wrapper and caps itself
+  with `max-h-full`, so exactly one row — the ADE logo — may be
+  flexible; every sibling (heading, lane pill, inline composer, extras)
+  must be `shrink-0`, and the logo keeps a `min-h` floor so it shrinks
+  instead of the column overflowing and clipping top and bottom in a
+  short window. The optical lift is wrapper padding, not a negative
+  margin on the column: a negative margin escapes the `max-h-full` cap
+  and reintroduces the clipping.
 - **Session creation and first turn race.** When a new session is
   created from the composer, the pane awaits the `onSessionCreated`
   callback and the session-list refresh before sending the first agent