refactor(resizable): fix panel minSize at 390px instead of a percentage

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>
This commit is contained in:
Sergey Kozyrenko
2026-07-09 13:32:41 +07:00
co-authored by Claude Opus 4.8
parent 2a3a553065
commit bbdbdb8666
2 changed files with 4 additions and 4 deletions
@@ -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>
+2 -2
View File
@@ -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>