From 9d38d5a0a765a3be2297871d57f7fd7c19c2d175 Mon Sep 17 00:00:00 2001
From: Osama Mabkhot <osama.zkt@proton.me>
Date: Thu, 30 Apr 2026 05:52:22 +0300
Subject: [PATCH] fix(browse): resize data tab right section

---
 src/components/browse-tab/BrowseTab.tsx       | 33 +++++++++----------
 .../structure-tab/SchemaTreePanel.tsx         |  2 +-
 2 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/src/components/browse-tab/BrowseTab.tsx b/src/components/browse-tab/BrowseTab.tsx
index dcec77f..a40a82e 100644
--- a/src/components/browse-tab/BrowseTab.tsx
+++ b/src/components/browse-tab/BrowseTab.tsx
@@ -57,6 +57,7 @@ function BrowseTab() {
             id="dataPanel"
             defaultSize={dataPanelSize}
             onResize={setDataPanelSize}
+            className="min-w-0"
           >
             <div
               className="flex h-full min-h-0 flex-col border-l"
@@ -67,25 +68,23 @@ function BrowseTab() {
             </div>
           </ResizablePanel>
 
-          <div className="hidden md:contents">
-            <ResizableHandle withHandle />
+          <ResizableHandle className="hidden md:flex" withHandle />
 
-            <ResizablePanel
-              id="schemaPanel"
-              defaultSize={schemaPanelSize}
-              onResize={setSchemaPanelSize}
-              className="relative"
+          <ResizablePanel
+            id="schemaPanel"
+            defaultSize={schemaPanelSize}
+            onResize={setSchemaPanelSize}
+            className="relative hidden min-w-0 md:block"
+          >
+            <SchemaTreePanel />
+            <div
+              className={`bg-background absolute inset-0 z-40 ${isEditing ? "block" : "hidden"}`}
             >
-              <SchemaTreePanel />
-              <div
-                className={`bg-background absolute inset-0 z-40 ${isEditing ? "block" : "hidden"}`}
-              >
-                <section className="bg-primary/5 h-full">
-                  <EditSection />
-                </section>
-              </div>
-            </ResizablePanel>
-          </div>
+              <section className="bg-primary/5 h-full">
+                <EditSection />
+              </section>
+            </div>
+          </ResizablePanel>
         </ResizablePanelGroup>
 
         <div className="md:hidden">
diff --git a/src/components/structure-tab/SchemaTreePanel.tsx b/src/components/structure-tab/SchemaTreePanel.tsx
index 4f5cced..265e761 100644
--- a/src/components/structure-tab/SchemaTreePanel.tsx
+++ b/src/components/structure-tab/SchemaTreePanel.tsx
@@ -2,7 +2,7 @@ import SchemaTree from "./SchemaTree";
 
 export default function SchemaTreePanel() {
   return (
-    <div className="h-full overflow-hidden">
+    <div className="h-full min-w-0 overflow-hidden">
       <div className="h-full overflow-y-auto">
         <SchemaTree />
       </div>