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

react-resizable-panels v4 reads numeric size props as PIXELS, not percent
("Numeric values are assumed to be pixels"). So `minSize={30}` was a 30px
floor — a user could drag either panel down to a ~30px sliver (~2.5% on a
1184px group) instead of the intended 30%. `defaultSize={45/55}` were px too
(they only rendered ~45/55% because default sizes normalize to a ratio;
minSize is an absolute per-panel constraint and is not normalized).

Use string percentages so the constraints mean what they read: minSize "30%",
defaultSize "45%"/"55%".

Verified live (chrome-devtools @1440px): separator aria-valuemin 2.536 -> 30;
dragging a panel to its minimum now floors at 29.97% (355px) instead of 30px.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/src/components/shared/detail-split-layout.tsx | 8 ++++----
 1 file 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 8dfa1a7f..2b9de323 100644
--- a/frontend/src/components/shared/detail-split-layout.tsx
+++ b/frontend/src/components/shared/detail-split-layout.tsx
@@ -21,8 +21,8 @@ export function DetailSplitLayout({
                 orientation="horizontal"
             >
                 <ResizablePanel
-                    defaultSize={45}
-                    minSize={30}
+                    defaultSize="45%"
+                    minSize="30%"
                 >
                     <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">
@@ -32,8 +32,8 @@ export function DetailSplitLayout({
                 </ResizablePanel>
                 <ResizableHandle withHandle />
                 <ResizablePanel
-                    defaultSize={55}
-                    minSize={30}
+                    defaultSize="55%"
+                    minSize="30%"
                 >
                     <div className={contentClassName}>{content}</div>
                 </ResizablePanel>