From 2a3a553065a7e4dd2cff0fa96ea1b4f05e284b19 Mon Sep 17 00:00:00 2001
From: Sergey Kozyrenko <sirozha_blr@tut.by>
Date: Thu, 9 Jul 2026 13:24:32 +0700
Subject: [PATCH] fix(flow): resizable panel sizes as % strings, not bare
 numbers
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Same react-resizable-panels v4 pixels-not-percent pitfall as detail-split-layout
(a55cac3): flow.tsx's desktop two-panel split passed minSize={30}/defaultSize={50}
as numbers, so the 30 was a 30px floor — a user could drag either the central-tabs
panel or the detail panel down to a ~30px sliver instead of the intended 30%.

Use string percentages: minSize "30%", defaultSize "50%".

Verified live (chrome-devtools @1440px, dev server on a real flow): separator
aria-valuemin=30, dragging a panel to its minimum floors at 29.97% (355px).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/src/pages/flows/flow.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/pages/flows/flow.tsx b/frontend/src/pages/flows/flow.tsx
index 4d6a0c4b..0cc51a5b 100644
--- a/frontend/src/pages/flows/flow.tsx
+++ b/frontend/src/pages/flows/flow.tsx
@@ -384,8 +384,8 @@ function Flow() {
                         orientation="horizontal"
                     >
                         <ResizablePanel
-                            defaultSize={50}
-                            minSize={30}
+                            defaultSize="50%"
+                            minSize="30%"
                         >
                             <div className="flex h-[calc(100dvh-3rem)] max-w-full flex-col rounded-none border-0">
                                 <div className="flex-1 overflow-auto py-4 pr-0 pl-4">
@@ -397,8 +397,8 @@ function Flow() {
                             <GripVertical className="size-4" />
                         </ResizableHandle>
                         <ResizablePanel
-                            defaultSize={50}
-                            minSize={30}
+                            defaultSize="50%"
+                            minSize="30%"
                         >
                             {tabsCard}
                         </ResizablePanel>