From bbdbdb86668babb5ed11c51f1c60dfa91dcf8b92 Mon Sep 17 00:00:00 2001
From: Sergey Kozyrenko <sirozha_blr@tut.by>
Date: Thu, 9 Jul 2026 13:32:41 +0700
Subject: [PATCH] refactor(resizable): fix panel minSize at 390px instead of a
 percentage
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Follow-up to a55cac3 / 2a3a553. A percentage minSize scales with the screen:
30% is ~700px on a 2560px display and ~1000px on an ultra-wide — far too large
a floor. Give both resizable splits (DetailSplitLayout + flow.tsx) a fixed 390px
per-panel minimum (numeric = px in react-resizable-panels v4). defaultSize stays
a percentage: flow 50%, DetailSplitLayout 45%/55%.

Verified live (chrome-devtools, dev server, real flow + settings-prompt):
- 1280px (narrowest desktop): group 1024px, both mins 390px — no collision
  (2x390 < 1024), drag range 390..633px.
- 2560px: min stays 390px (16.9%), not 691px (30%).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/src/components/shared/detail-split-layout.tsx | 4 ++--
 frontend/src/pages/flows/flow.tsx                      | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/shared/detail-split-layout.tsx b/frontend/src/components/shared/detail-split-layout.tsx
index 2b9de323..d9d5a022 100644
--- a/frontend/src/components/shared/detail-split-layout.tsx
+++ b/frontend/src/components/shared/detail-split-layout.tsx
@@ -22,7 +22,7 @@ export function DetailSplitLayout({
             >
                 <ResizablePanel
                     defaultSize="45%"
-                    minSize="30%"
+                    minSize={390}
                 >
                     <div className="bg-card h-full min-h-0 overflow-y-auto">
                         <Card className="mx-auto min-h-full w-full max-w-2xl rounded-none border-0">
@@ -33,7 +33,7 @@ export function DetailSplitLayout({
                 <ResizableHandle withHandle />
                 <ResizablePanel
                     defaultSize="55%"
-                    minSize="30%"
+                    minSize={390}
                 >
                     <div className={contentClassName}>{content}</div>
                 </ResizablePanel>
diff --git a/frontend/src/pages/flows/flow.tsx b/frontend/src/pages/flows/flow.tsx
index 0cc51a5b..a0a3137b 100644
--- a/frontend/src/pages/flows/flow.tsx
+++ b/frontend/src/pages/flows/flow.tsx
@@ -385,7 +385,7 @@ function Flow() {
                     >
                         <ResizablePanel
                             defaultSize="50%"
-                            minSize="30%"
+                            minSize={390}
                         >
                             <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">
@@ -398,7 +398,7 @@ function Flow() {
                         </ResizableHandle>
                         <ResizablePanel
                             defaultSize="50%"
-                            minSize="30%"
+                            minSize={390}
                         >
                             {tabsCard}
                         </ResizablePanel>