From a2df07194516ba3968d855b89f0050fa3b4222fb Mon Sep 17 00:00:00 2001
From: nicholai <nicholaivogelfilms@gmail.com>
Date: Thu, 9 Oct 2025 20:07:58 -0600
Subject: [PATCH] fix: prevent panel expansion by implementing proper flex
 constraints

- Replace h-auto with min-h-0 on panel containers for proper flex shrinking
- Add overflow-hidden to parent grid to constrain layout
- Update ScrollArea components from h-full to min-h-0
- Ensures panels maintain consistent sizing across all viewports
- Internal scrolling now works correctly with auto-scroll to bottom

Fixes #1
---
 .../src/components/terminal-chat-interface.tsx         | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/bandit-runner-app/src/components/terminal-chat-interface.tsx b/bandit-runner-app/src/components/terminal-chat-interface.tsx
index 60085d9..18b0eb1 100644
--- a/bandit-runner-app/src/components/terminal-chat-interface.tsx
+++ b/bandit-runner-app/src/components/terminal-chat-interface.tsx
@@ -384,9 +384,9 @@ export function TerminalChatInterface() {
         />
 
         {/* Main content area */}
-        <div className="flex-1 grid grid-cols-1 lg:grid-cols-[1.2fr_0.8fr] gap-4 sm:gap-6 min-h-0">
+        <div className="flex-1 grid grid-cols-1 lg:grid-cols-[1.2fr_0.8fr] gap-4 sm:gap-6 min-h-0 overflow-hidden">
           {/* Terminal Panel */}
-          <div className="relative flex flex-col h-[55vh] lg:h-auto">
+          <div className="relative flex flex-col min-h-0">
             {/* Corner accents */}
             <div className="absolute -left-1 -top-1 w-4 h-4 border-l-2 border-t-2 border-primary z-20" />
             <div className="absolute -right-1 -top-1 w-4 h-4 border-r-2 border-t-2 border-primary z-20" />
@@ -409,7 +409,7 @@ export function TerminalChatInterface() {
               </div>
 
               {/* Terminal content */}
-              <ScrollArea ref={terminalScrollRef} className="flex-1 relative z-10 h-full">
+              <ScrollArea ref={terminalScrollRef} className="flex-1 relative z-10 min-h-0">
                 <div className="p-4 space-y-1">
                   {wsTerminalLines.map((line, idx) => (
                     <div
@@ -493,7 +493,7 @@ export function TerminalChatInterface() {
           </div>
 
           {/* Agent Panel */}
-          <div className="relative flex flex-col h-[40vh] lg:h-auto">
+          <div className="relative flex flex-col min-h-0">
             {/* Corner accents */}
             <div className="absolute -left-1 -top-1 w-4 h-4 border-l-2 border-t-2 border-primary z-20" />
             <div className="absolute -right-1 -top-1 w-4 h-4 border-r-2 border-t-2 border-primary z-20" />
@@ -515,7 +515,7 @@ export function TerminalChatInterface() {
               </div>
 
               {/* Messages */}
-              <ScrollArea ref={chatScrollRef} className="flex-1 relative z-10 h-full">
+              <ScrollArea ref={chatScrollRef} className="flex-1 relative z-10 min-h-0">
                 <div className="p-4 space-y-4">
                   {wsChatMessages.map((msg, idx) => (
                     <div key={idx} className="space-y-1">