From 60fd37c90af25c6c167012a8f54439e296dedb99 Mon Sep 17 00:00:00 2001
From: Woody <woody.ck.tse@gmail.com>
Date: Sat, 25 Apr 2026 14:50:05 +0800
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20resizable=20panel=20sizing=20?=
 =?UTF-8?q?=E2=80=94=20use=20percentage=20strings=20for=20constraints?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

react-resizable-panels v4 interprets numeric minSize/maxSize as PIXELS, not percentages.
Change minSize={15} → minSize='15%' and maxSize={60} → maxSize='60%'.
Add defaultLayout on Group for explicit 30/70 initial split.
Add min-h-0 to grid container and shrink-0 to separator.

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

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
---
 frontend/src/pages/LTTPage.tsx | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/frontend/src/pages/LTTPage.tsx b/frontend/src/pages/LTTPage.tsx
index 79edf2f..898cece 100644
--- a/frontend/src/pages/LTTPage.tsx
+++ b/frontend/src/pages/LTTPage.tsx
@@ -26,9 +26,14 @@ export const LTTPage: React.FC = () => {
 
   return (
     <div className="h-full bg-gray-50">
-      <Group orientation="vertical" id="ltt-main-group">
-        <Panel id="ltt-upper-panel" defaultSize={30} minSize={15} maxSize={60}>
-          <div className="h-full grid grid-cols-2">
+      <Group
+        orientation="vertical"
+        id="ltt-main-group"
+        className="h-full"
+        defaultLayout={{ 'ltt-upper-panel': 30, 'ltt-lower-panel': 70 }}
+      >
+        <Panel id="ltt-upper-panel" minSize="15%" maxSize="60%">
+          <div className="h-full grid grid-cols-2 min-h-0">
             <div className="border-r border-gray-200 p-4 min-h-0 overflow-hidden">
               <VideoPlaceholder />
             </div>
@@ -39,11 +44,11 @@ export const LTTPage: React.FC = () => {
           </div>
         </Panel>
 
-        <Separator className="h-2 cursor-row-resize flex items-center justify-center bg-gray-200 [&[data-separator='hover']]:bg-blue-300 [&[data-separator='active']]:bg-blue-400 transition-colors">
-          <div className="w-8 h-1 rounded-full bg-gray-400 [&[data-separator='hover']_&]:bg-blue-500 [&[data-separator='active']_&]:bg-blue-600 transition-colors" />
+        <Separator className="h-3 cursor-row-resize flex items-center justify-center bg-gray-300 hover:bg-blue-400 active:bg-blue-500 transition-colors shrink-0">
+          <div className="w-10 h-1.5 rounded-full bg-gray-500" />
         </Separator>
 
-        <Panel id="ltt-lower-panel" minSize={20}>
+        <Panel id="ltt-lower-panel" minSize="20%">
           <div className="h-full p-6 border-t border-gray-200 overflow-y-auto">
             <ResponsePanel
               answer={queryMutation.data?.answer ?? null}