fix(ui): keep Hub chat input from overlapping SessionInsights on paste (#6719)

Signed-off-by: Abhijay007 <Abhijay007j@gmail.com>
Co-authored-by: Zane Staggs <zane@squareup.com>

ui/desktop/src/components/Hub.tsx

@@ -73,8 +73,8 @@ export default function Hub({
   };
 
   return (
-    <div className="flex flex-col h-full bg-background-muted">
+    <div className="flex flex-col h-full min-h-0 bg-background-muted">
-      <div className="flex-1 flex flex-col mb-0.5 relative">
+      <div className="flex-1 flex flex-col min-h-[45vh] overflow-hidden mb-0.5 relative">
         <SessionInsights />
         {isCreatingSession && (
           <div className="absolute bottom-1 left-4 z-20 pointer-events-none">
@@ -83,24 +83,26 @@ export default function Hub({
         )}
       </div>
 
-      <ChatInput
+      <div className="flex-shrink-0 max-h-[50vh] min-h-0 overflow-hidden flex flex-col">
-        sessionId={null}
+        <ChatInput
-        handleSubmit={handleSubmit}
+          sessionId={null}
-        chatState={isCreatingSession ? ChatState.LoadingConversation : ChatState.Idle}
+          handleSubmit={handleSubmit}
-        onStop={() => {}}
+          chatState={isCreatingSession ? ChatState.LoadingConversation : ChatState.Idle}
-        initialValue=""
+          onStop={() => {}}
-        setView={setView}
+          initialValue=""
-        totalTokens={0}
+          setView={setView}
-        accumulatedInputTokens={0}
+          totalTokens={0}
-        accumulatedOutputTokens={0}
+          accumulatedInputTokens={0}
-        droppedFiles={[]}
+          accumulatedOutputTokens={0}
-        onFilesProcessed={() => {}}
+          droppedFiles={[]}
-        messages={[]}
+          onFilesProcessed={() => {}}
-        disableAnimation={false}
+          messages={[]}
-        sessionCosts={undefined}
+          disableAnimation={false}
-        toolCount={0}
+          sessionCosts={undefined}
-        onWorkingDirChange={setWorkingDir}
+          toolCount={0}
-      />
+          onWorkingDirChange={setWorkingDir}
+        />
+      </div>
     </div>
   );
 }

ui/desktop/src/components/Layout/AppLayout.tsx

@@ -91,7 +91,7 @@ const AppLayoutContent: React.FC<AppLayoutContentProps> = ({ activeSessions }) =
   };
 
   return (
-    <div className="flex flex-1 w-full relative animate-fade-in">
+    <div className="flex flex-1 w-full min-h-0 relative animate-fade-in">
       {!shouldHideButtons && (
         <div className={`${headerPadding} absolute top-3 z-100 flex items-center`}>
           <SidebarTrigger

ui/desktop/src/components/sessions/SessionsInsights.tsx

@@ -171,7 +171,7 @@ export function SessionInsights() {
                   See all
                 </Button>
               </div>
-              <div className="space-y-3 min-h-[96px]">
+              <div className="space-y-3 min-h-[96px] max-h-[140px] overflow-hidden">
                 {/* Skeleton chat items */}
                 <div className="flex items-center justify-between py-1 px-2">
                   <div className="flex items-center space-x-2">
@@ -295,7 +295,7 @@ export function SessionInsights() {
                   See all
                 </Button>
               </div>
-              <div className="space-y-1 min-h-[96px] transition-all duration-300 ease-in-out">
+              <div className="space-y-1 min-h-[96px] max-h-[140px] overflow-hidden transition-all duration-300 ease-in-out">
                 {isLoadingSessions ? (
                   <>
                     <div className="flex items-center justify-between py-1 px-2">

ui/desktop/src/components/ui/sidebar.tsx

@@ -125,7 +125,7 @@ function SidebarProvider({
             } as React.CSSProperties
           }
           className={cn(
-            'group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full',
+            'group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex h-svh min-h-0 w-full overflow-hidden',
             className
           )}
           {...props}
@@ -294,7 +294,7 @@ function SidebarInset({ className, ...props }: React.ComponentProps<'main'>) {
     <main
       data-slot="sidebar-inset"
       className={cn(
-        'bg-background relative flex w-full flex-1 flex-col min-w-0',
+        'bg-background relative flex w-full flex-1 flex-col min-w-0 min-h-0',
         // For inset variant (used in the app)
         'md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm',
         // For offcanvas variant - ensure content doesn't go under sidebar