From 675b1d573bead13661ff6529472b7bf92c50f17a Mon Sep 17 00:00:00 2001
From: Woody <woody.ck.tse@gmail.com>
Date: Thu, 23 Apr 2026 15:11:32 +0800
Subject: [PATCH] feat(frontend): set top container to 30% height with
 scrollable bottom response panel

- Changed grid layout from grid-rows-[1fr_auto] to grid-rows-[30%_1fr]

- Top section (video placeholder + query input) now fixed at 30% viewport height

- Bottom response panel scrolls independently when content is long

- Added overflow-hidden to video container to prevent overflow issues

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
---
 frontend/src/App.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 7e642c3..35c6e5c 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -32,8 +32,8 @@ const AppContent: React.FC = () => {
   }
 
   return (
-    <div className="h-screen grid grid-rows-[1fr_auto] grid-cols-2 bg-gray-50">
-      <div className="border-r border-b border-gray-200 p-4 min-h-0">
+    <div className="h-screen grid grid-rows-[30%_1fr] grid-cols-2 bg-gray-50">
+      <div className="border-r border-b border-gray-200 p-4 min-h-0 overflow-hidden">
         <VideoPlaceholder />
       </div>
       <div className="border-b border-gray-200 p-6 flex flex-col gap-4 overflow-y-auto min-h-0">