From 13bcab9cd1786f6f30f9a38b15556cf9703417db Mon Sep 17 00:00:00 2001
From: ParkerTenBroeck <51721964+ParkerTenBroeck@users.noreply.github.com>
Date: Thu, 8 Jan 2026 17:06:32 -0500
Subject: [PATCH] fixed small issue where main vertical splitter was causing
 overflow

---
 web/root/index.html       |  2 +-
 web/root/src/splitters.ts |  5 +----
 web/root/style/style.scss | 16 +++++++++++++++-
 3 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/web/root/index.html b/web/root/index.html
index efb9044..5c0c855 100644
--- a/web/root/index.html
+++ b/web/root/index.html
@@ -36,7 +36,7 @@
 
         <div class="hSplit" style="--split-default: 50%" title="Drag to resize canvas height"></div>
 
-        <div style="padding-bottom: 10px">
+        <div class="flexCol">
             <div class="controls" style="background: var(--bg-0)">
                 <button id="togglePhysics" class="btn btn-toggle active" title="Toggle physics layout">
                     Physics: ON
diff --git a/web/root/src/splitters.ts b/web/root/src/splitters.ts
index a321282..89bc5ba 100644
--- a/web/root/src/splitters.ts
+++ b/web/root/src/splitters.ts
@@ -154,10 +154,7 @@ export function enableFlexSplitters() {
     const gap = splitter.getBoundingClientRect().width || 8;
     splitter.style.flex = `0 0 ${gap}px`;
 
-    // Optional per-splitter CSS vars:
-    // --split-default: 30% (right pane width)
-    // --split-min-a: 220px (min left)
-    // --split-min-b: 220px (min right)
+
     const defPct = getVarPct(splitter, "--split-default", 50);
     const minA = getVarPx(splitter, "--split-min-a", 220);
     const minB = getVarPx(splitter, "--split-min-b", 220);
diff --git a/web/root/style/style.scss b/web/root/style/style.scss
index 928212e..d294bdb 100644
--- a/web/root/style/style.scss
+++ b/web/root/style/style.scss
@@ -29,7 +29,17 @@ body {
 
 .vscroll {
   height: 100%;
-  overflow-x: scroll;
+  overflow-y: scroll;
+}
+
+.flexCol{
+  display: flex;
+  flex-direction: column;
+}
+
+.flexRow{
+  display: flex;
+  flex-direction: row;
 }
 
 .hSplit {
@@ -37,6 +47,8 @@ body {
         cursor: col-resize;
     }
     height: 8px;
+    min-height: 8px;
+    max-height: 8px;
     background: var(--separator-bg);
     transition:
         background var(--dur-med) var(--ease-standard),
@@ -48,6 +60,8 @@ body {
         cursor: col-resize;
     }
     width: 8px;
+    min-width: 8px;
+    max-width: 8px;
     background: var(--separator-bg);
     transition:
         background var(--dur-med) var(--ease-standard),