From 4e6e66d7b1c433c3cd43851ed8beea6bf8e9e567 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Thu, 2 Mar 2023 02:31:39 +0100
Subject: [PATCH] fix splitpanes

---
 .../apps/components/layout/AppSplitpanes.svelte   | 15 +++++++++++----
 .../apps/editor/component/Component.svelte        |  1 -
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/frontend/src/lib/components/apps/components/layout/AppSplitpanes.svelte b/frontend/src/lib/components/apps/components/layout/AppSplitpanes.svelte
index b15b373c95..ad8f78193d 100644
--- a/frontend/src/lib/components/apps/components/layout/AppSplitpanes.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppSplitpanes.svelte
@@ -6,6 +6,7 @@
 	import { concatCustomCss } from '../../utils'
 	import InputValue from '../helpers/InputValue.svelte'
 	import { Pane, Splitpanes } from 'svelte-splitpanes'
+	import { deepEqual } from 'fast-equals'
 
 	export let id: string
 	export let configuration: Record<string, AppInput>
@@ -30,15 +31,21 @@
 	$: $selectedComponent === id && onFocus()
 	$: css = concatCustomCss($app.css?.containercomponent, customCss)
 
-	$: sumedup = panes.map((x) => (x / panes.reduce((a, b) => a + b, 0)) * 100)
+	let sumedup = [50, 50]
+	$: {
+		let ns = panes.map((x) => (x / panes.reduce((a, b) => a + b, 0)) * 100)
+		if (!deepEqual(ns, sumedup)) {
+			sumedup = ns
+		}
+	}
 </script>
 
 <InputValue {id} input={configuration.noPadding} bind:value={noPadding} />
 
 <div class="h-full w-full border" on:pointerdown|stopPropagation>
 	<Splitpanes {horizontal}>
-		{#each sumedup as paneSize, index}
-			<Pane bind:size={paneSize}>
+		{#each sumedup as paneSize, index (index)}
+			<Pane size={paneSize}>
 				{#if $app.subgrids?.[`${id}-${index}`]}
 					<SubGridEditor
 						noYPadding
@@ -50,7 +57,7 @@
 						bind:subGrid={$app.subgrids[`${id}-${index}`]}
 						containerHeight={horizontal
 							? (componentContainerHeight * paneSize) / 100 - 1
-							: componentContainerHeight}
+							: componentContainerHeight - 8}
 						on:focus={() => {
 							$selectedComponent = id
 							$focusedGrid = {
diff --git a/frontend/src/lib/components/apps/editor/component/Component.svelte b/frontend/src/lib/components/apps/editor/component/Component.svelte
index 7f7bf27031..4187d21eb2 100644
--- a/frontend/src/lib/components/apps/editor/component/Component.svelte
+++ b/frontend/src/lib/components/apps/editor/component/Component.svelte
@@ -39,7 +39,6 @@
 	import AppAggridTable from '../../components/display/table/AppAggridTable.svelte'
 	import AppDrawer from '../../components/layout/AppDrawer.svelte'
 	import AppSplitpanes from '../../components/layout/AppSplitpanes.svelte'
-	import { deepEqual } from 'fast-equals'
 
 	export let component: AppComponent
 	export let selected: boolean