fix(gui): remove awkward inner scroll on onboarding API-key card (#12802)

* fix(gui): remove awkward inner scroll on onboarding API-key card

In the empty chat state, `main` is a fixed-height (100vh) flex scroll
container. Its children (the StepsDiv banner area and the input/onboarding
section) were allowed to flex-shrink, and StepsDiv's always-on
`overflow-y-scroll` turned into a cramped nested scrollbox. This trapped
the onboarding API-key card in a small inner scroll area instead of
letting it lay out naturally.

Only enable StepsDiv's overflow scroll when there is chat history (when it
is `flex-1`), and mark both the empty-state StepsDiv and the input section
`shrink-0` so the onboarding card keeps its natural height and the panel
scrolls as one. Chat layout (history present) is unchanged.

Co-authored-by: Cursor <cursoragent@cursor.com>

* fix(gui): remove empty onboarding route scroll trap

Co-authored-by: Cursor <cursoragent@cursor.com>

---------

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: sestinj

gui/src/pages/gui/Chat.tsx

@@ -386,7 +386,7 @@ export function Chat() {
 
       <StepsDiv
         ref={stepsDivRef}
-        className={`overflow-y-scroll pt-[8px] ${showScrollbar ? "thin-scrollbar" : "no-scrollbar"} ${history.length > 0 ? "flex-1" : ""}`}
+        className={`pt-[8px] ${showScrollbar ? "thin-scrollbar" : "no-scrollbar"} ${history.length > 0 ? "min-h-0 flex-1 overflow-y-scroll" : "shrink-0"}`}
       >
         <DeprecationBanner dismissable={true} />
         {highlights}
@@ -411,7 +411,7 @@ export function Chat() {
             </div>
           ))}
       </StepsDiv>
-      <div className={"relative"}>
+      <div className={"relative shrink-0"}>
         <ContinueInputBox
           isMainInput
           isLastUserInput={false}

gui/src/pages/gui/index.tsx

@@ -3,11 +3,11 @@ import { Chat } from "./Chat";
 
 export default function GUI() {
   return (
-    <div className="flex w-screen flex-row overflow-hidden">
-      <aside className="4xl:flex border-vsc-input-border no-scrollbar hidden w-96 overflow-y-auto border-0 border-r border-solid">
+    <div className="flex min-h-0 w-screen flex-row overflow-x-hidden">
+      <aside className="4xl:flex border-vsc-input-border no-scrollbar hidden min-h-0 w-96 overflow-y-auto border-0 border-r border-solid">
         <History />
       </aside>
-      <main className="no-scrollbar flex flex-1 flex-col overflow-y-auto">
+      <main className="no-scrollbar flex min-h-0 flex-1 flex-col">
         <Chat />
       </main>
     </div>