From ecb7f4f2c536483b4a42e823c9cf2d289392088a Mon Sep 17 00:00:00 2001
From: ZacharyZcR <zacharyzcr1984@gmail.com>
Date: Thu, 21 May 2026 02:15:59 +0800
Subject: [PATCH] fix: add 3-way horizontal split variant and fix file manager
 overflow in split view (#796)

Adds a "3-Way (H)" layout option (2 top + 1 bottom) alongside the
existing "3-Way (V)" (1 left + 2 right).

Fixes file manager content overflowing its split pane by adding
min-h-0 to nested flex containers that were missing it.
---
 src/types/ui-types.ts                        |  1 +
 src/ui/features/file-manager/FileManager.tsx |  4 +--
 src/ui/lib/theme.ts                          |  5 ++-
 src/ui/shell/SplitView.tsx                   | 32 ++++++++++++++++++++
 src/ui/sidebar/SplitScreenPanel.tsx          |  9 ++++++
 5 files changed, 48 insertions(+), 3 deletions(-)

diff --git a/src/types/ui-types.ts b/src/types/ui-types.ts
index 8e0fba68..62c2bbd6 100644
--- a/src/types/ui-types.ts
+++ b/src/types/ui-types.ts
@@ -272,6 +272,7 @@ export type SplitMode =
   | "none"
   | "2-way"
   | "3-way"
+  | "3-way-horizontal"
   | "4-way"
   | "5-way"
   | "6-way";
diff --git a/src/ui/features/file-manager/FileManager.tsx b/src/ui/features/file-manager/FileManager.tsx
index a16a1e2c..8f799b2f 100644
--- a/src/ui/features/file-manager/FileManager.tsx
+++ b/src/ui/features/file-manager/FileManager.tsx
@@ -2551,7 +2551,7 @@ function FileManagerContent({ initialHost, onClose }: FileManagerProps) {
   return (
     <div className="h-full flex flex-col bg-background relative overflow-hidden isolate">
       <div
-        className="h-full w-full flex flex-col"
+        className="h-full w-full flex flex-col min-h-0"
         style={{
           visibility: isConnectionLogExpanded ? "hidden" : "visible",
         }}
@@ -2855,7 +2855,7 @@ function FileManagerContent({ initialHost, onClose }: FileManagerProps) {
                 : "hidden md:flex",
             )}
           >
-            <div className="flex-1 flex flex-col overflow-hidden border border-border bg-card">
+            <div className="flex-1 flex flex-col overflow-hidden min-h-0 border border-border bg-card">
               <FileManagerSidebar
                 currentHost={currentHost}
                 currentPath={currentPath}
diff --git a/src/ui/lib/theme.ts b/src/ui/lib/theme.ts
index 1d4200fc..70edf91d 100644
--- a/src/ui/lib/theme.ts
+++ b/src/ui/lib/theme.ts
@@ -98,7 +98,8 @@ export const FOLDER_COLORS = [
 export const SPLIT_MODES: { id: SplitMode; label: string }[] = [
   { id: "none", label: "None" },
   { id: "2-way", label: "2-Way" },
-  { id: "3-way", label: "3-Way" },
+  { id: "3-way", label: "3-Way (V)" },
+  { id: "3-way-horizontal", label: "3-Way (H)" },
   { id: "4-way", label: "4-Way" },
   { id: "5-way", label: "5-Way" },
   { id: "6-way", label: "6-Way" },
@@ -108,6 +109,7 @@ export const PANE_COUNTS: Record<SplitMode, number> = {
   none: 0,
   "2-way": 2,
   "3-way": 3,
+  "3-way-horizontal": 3,
   "4-way": 4,
   "5-way": 5,
   "6-way": 6,
@@ -117,6 +119,7 @@ export const PANE_LAYOUTS: Record<SplitMode, string> = {
   none: "",
   "2-way": "grid-cols-2 grid-rows-1",
   "3-way": "grid-cols-2 grid-rows-2",
+  "3-way-horizontal": "grid-cols-2 grid-rows-2",
   "4-way": "grid-cols-2 grid-rows-2",
   "5-way": "grid-cols-3 grid-rows-2",
   "6-way": "grid-cols-3 grid-rows-2",
diff --git a/src/ui/shell/SplitView.tsx b/src/ui/shell/SplitView.tsx
index 30d614e8..03849ef3 100644
--- a/src/ui/shell/SplitView.tsx
+++ b/src/ui/shell/SplitView.tsx
@@ -19,6 +19,8 @@ function defaultSizes(mode: SplitMode): {
       return { rowSizes: [100], rowColSizes: [[50, 50]] };
     case "3-way":
       return { rowSizes: [50, 50], rowColSizes: [[50, 50], [100]] };
+    case "3-way-horizontal":
+      return { rowSizes: [50, 50], rowColSizes: [[50, 50], [100]] };
     case "4-way":
       return {
         rowSizes: [50, 50],
@@ -444,6 +446,36 @@ export function SplitView({
         </div>
       )}
 
+      {splitMode === "3-way-horizontal" && (
+        <div className="flex flex-col w-full h-full min-h-0">
+          <div
+            className="flex min-h-0 overflow-hidden"
+            style={{ height: `${rowSizes[0]}%` }}
+          >
+            <div
+              className="min-w-0 min-h-0 overflow-hidden"
+              style={{ width: `${rowColSizes[0][0]}%` }}
+            >
+              {pane(0)}
+            </div>
+            <ColDivider
+              onMouseDown={(e) => onColDivider(e, 0, 0)}
+              onTouchStart={(e) => onColDividerTouch(e, 0, 0)}
+            />
+            <div className="flex-1 min-w-0 min-h-0 overflow-hidden">
+              {pane(1)}
+            </div>
+          </div>
+          <RowDivider
+            onMouseDown={(e) => onRowDivider(e, 0)}
+            onTouchStart={(e) => onRowDividerTouch(e, 0)}
+          />
+          <div className="flex-1 min-h-0 overflow-hidden">
+            {pane(2)}
+          </div>
+        </div>
+      )}
+
       {splitMode === "4-way" && (
         <div className="flex flex-col w-full h-full min-h-0">
           <Row rowIdx={0} paneIndices={[0, 1]} />
diff --git a/src/ui/sidebar/SplitScreenPanel.tsx b/src/ui/sidebar/SplitScreenPanel.tsx
index 115f367c..3c6ce838 100644
--- a/src/ui/sidebar/SplitScreenPanel.tsx
+++ b/src/ui/sidebar/SplitScreenPanel.tsx
@@ -24,6 +24,15 @@ const LAYOUT_PREVIEWS: Record<SplitMode, React.ReactNode> = {
       </div>
     </div>
   ),
+  "3-way-horizontal": (
+    <div className="flex flex-col gap-0.5 size-full">
+      <div className="flex gap-0.5 flex-1">
+        <div className="flex-1 border-2 border-current" />
+        <div className="flex-1 border-2 border-current" />
+      </div>
+      <div className="flex-1 border-2 border-current" />
+    </div>
+  ),
   "4-way": (
     <div className="grid grid-cols-2 grid-rows-2 gap-0.5 size-full">
       <div className="border-2 border-current" />