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.
This commit is contained in:
ZacharyZcR
2026-05-21 02:15:59 +08:00
committed by GitHub
parent 5971bcfe88
commit ecb7f4f2c5
5 changed files with 48 additions and 3 deletions
+32
View File
@@ -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]} />