From c0669c34a09fab03c6cb696bbad8c3c69a204bff Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Fri, 17 Mar 2023 15:46:45 +0100
Subject: [PATCH] fix(frontend): fix horizontal splitpanes (#1301)

---
 .../components/apps/components/layout/AppSplitpanes.svelte | 4 +---
 .../src/lib/components/apps/editor/SubGridEditor.svelte    | 7 ++++---
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/frontend/src/lib/components/apps/components/layout/AppSplitpanes.svelte b/frontend/src/lib/components/apps/components/layout/AppSplitpanes.svelte
index aeb53114db..9635583273 100644
--- a/frontend/src/lib/components/apps/components/layout/AppSplitpanes.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppSplitpanes.svelte
@@ -79,9 +79,7 @@
 						class={css?.container.class}
 						style={css?.container.style}
 						bind:subGrid={$app.subgrids[`${id}-${index}`]}
-						containerHeight={horizontal
-							? (componentContainerHeight * paneSize) / 100 - 1
-							: componentContainerHeight - 8}
+						containerHeight={horizontal ? undefined : componentContainerHeight - 8}
 						on:focus={() => {
 							$selectedComponent = id
 							$focusedGrid = {
diff --git a/frontend/src/lib/components/apps/editor/SubGridEditor.svelte b/frontend/src/lib/components/apps/editor/SubGridEditor.svelte
index 5f15205135..ee1e07412a 100644
--- a/frontend/src/lib/components/apps/editor/SubGridEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/SubGridEditor.svelte
@@ -10,7 +10,7 @@
 	import Grid from '../svelte-grid/Grid.svelte'
 	import GridViewer from './GridViewer.svelte'
 
-	export let containerHeight: number
+	export let containerHeight: number | undefined = undefined
 	export let containerWidth: number | undefined = undefined
 	let classes = ''
 	export { classes as class }
@@ -79,12 +79,13 @@
 			'overflow-auto',
 			noYPadding ? '' : 'py-2',
 			classes ?? '',
-			noPadding ? 'px-0' : 'px-2'
+			noPadding ? 'px-0' : 'px-2',
+			containerHeight ? `h-[${containerHeight}px}]` : 'h-full'
 		)}
 		on:pointerdown|stopPropagation={onpointerdown}
 		on:pointerleave={onpointerup}
 		on:pointerup={onpointerup}
-		style="height: {containerHeight}px; {style ?? ''}"
+		style={style ?? ''}
 	>
 		{#if $mode !== 'preview'}
 			<div class={highlight ? 'border-gray-400  border border-dashed min-h-full' : ''}>