Nicholai/bandit-runner
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: prevent panel expansion by implementing proper flex constraints

Browse Source 
- 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
This commit is contained in:
nicholai 2025-10-09 20:07:58 -06:00
parent 9881c450b6
commit a2df071945
1 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
bandit-runner-app/src/components/terminal-chat-interface.tsx
View File

@ -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">