woody
/
legco_ai_assistant
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(frontend): resizable panel sizing — use percentage strings for constraints 

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>
This commit is contained in:
Woody 2026-04-25 14:50:05 +08:00
parent 5ff4eaa104
commit 60fd37c90a
1 changed files with 11 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/src/pages/LTTPage.tsx
View File

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