diff --git a/packages/web/src/elements/HorizontalSplitter.svelte b/packages/web/src/elements/HorizontalSplitter.svelte
index e2c9ec2f5..d6dfac72b 100644
--- a/packages/web/src/elements/HorizontalSplitter.svelte
+++ b/packages/web/src/elements/HorizontalSplitter.svelte
@@ -1,5 +1,8 @@
 <script context="module">
-  export function computeSplitterSize(initialValue, clientSize) {
+  export function computeSplitterSize(initialValue, clientSize, customRatio) {
+    if (customRatio != null) {
+      return clientSize * customRatio;
+    }
     if (_.isString(initialValue) && initialValue.startsWith('~') && initialValue.endsWith('px'))
       return clientSize - parseInt(initialValue.slice(1, -2));
     if (_.isString(initialValue) && initialValue.endsWith('px')) return parseInt(initialValue.slice(0, -2));
@@ -27,8 +30,9 @@
 
   export let size = 0;
   let clientWidth;
+  let customRatio = null;
 
-  $: size = computeSplitterSize(initialValue, clientWidth);
+  $: size = computeSplitterSize(initialValue, clientWidth, customRatio);
 </script>
 
 <div class="container" bind:clientWidth>
@@ -52,7 +56,10 @@
         class="horizontal-split-handle"
         style={collapsed1 || collapsed2 ? 'display:none' : ''}
         use:splitterDrag={'clientX'}
-        on:resizeSplitter={e => (size += e.detail)}
+        on:resizeSplitter={e => {
+          size += e.detail;
+          if (clientWidth > 0) customRatio = size / clientWidth;
+        }}
       />
     {/if}
     <div
diff --git a/packages/web/src/elements/VerticalSplitter.svelte b/packages/web/src/elements/VerticalSplitter.svelte
index 57c22c953..74d81302c 100644
--- a/packages/web/src/elements/VerticalSplitter.svelte
+++ b/packages/web/src/elements/VerticalSplitter.svelte
@@ -16,8 +16,9 @@
 
   let collapsed1 = false;
   let collapsed2 = false;
+  let customRatio = null;
 
-  $: size = computeSplitterSize(initialValue, clientHeight);
+  $: size = computeSplitterSize(initialValue, clientHeight, customRatio);
 </script>
 
 <div class="container" bind:clientHeight>
@@ -38,7 +39,10 @@
       class={'vertical-split-handle'}
       style={collapsed1 || collapsed2 ? 'display:none' : ''}
       use:splitterDrag={'clientY'}
-      on:resizeSplitter={e => (size += e.detail)}
+      on:resizeSplitter={e => {
+        size += e.detail;
+        if (clientHeight > 0) customRatio = size / clientHeight;
+      }}
     />
     <div
       class={collapsed1 ? 'child1' : 'child2'}