From 1b3462b461fce77939ee14593176ea366ba68ed8 Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Thu, 18 Jan 2024 17:40:21 +0100
Subject: [PATCH] fix(frontend): fix hidden wizards (#3045)

---
 frontend/src/lib/components/wizards/AgGridWizard.svelte  | 8 ++++++--
 .../src/lib/components/wizards/DBExplorerWizard.svelte   | 9 +++++++--
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/frontend/src/lib/components/wizards/AgGridWizard.svelte b/frontend/src/lib/components/wizards/AgGridWizard.svelte
index 6c0063e52d..c61c81cd96 100644
--- a/frontend/src/lib/components/wizards/AgGridWizard.svelte
+++ b/frontend/src/lib/components/wizards/AgGridWizard.svelte
@@ -4,8 +4,8 @@
 	import SimpleEditor from '../SimpleEditor.svelte'
 	import Label from '../Label.svelte'
 	import Tooltip from '../Tooltip.svelte'
-
 	import Button from '../common/button/Button.svelte'
+	import { offset, flip, shift } from 'svelte-floating-ui/dom'
 
 	type Column = {
 		minWidth: number
@@ -83,7 +83,11 @@
 </script>
 
 <Popup
-	floatingConfig={{ strategy: 'fixed', placement: 'left-end' }}
+	floatingConfig={{
+		strategy: 'fixed',
+		placement: 'left-end',
+		middleware: [offset(8), flip(), shift()]
+	}}
 	containerClasses="border rounded-lg shadow-lg bg-surface p-4"
 >
 	<svelte:fragment slot="button">
diff --git a/frontend/src/lib/components/wizards/DBExplorerWizard.svelte b/frontend/src/lib/components/wizards/DBExplorerWizard.svelte
index 3b4e962847..ff8ab10505 100644
--- a/frontend/src/lib/components/wizards/DBExplorerWizard.svelte
+++ b/frontend/src/lib/components/wizards/DBExplorerWizard.svelte
@@ -8,6 +8,7 @@
 	import Button from '../common/button/Button.svelte'
 	import { twMerge } from 'tailwind-merge'
 	import { ColumnIdentity, type ColumnDef } from '../apps/components/display/dbtable/utils'
+	import { offset, flip, shift } from 'svelte-floating-ui/dom'
 
 	export let value: ColumnDef | undefined
 
@@ -119,8 +120,12 @@
 </script>
 
 <Popup
-	floatingConfig={{ strategy: 'fixed', placement: 'left-start' }}
-	containerClasses="border rounded-lg shadow-lg bg-surface p-4 h-[512px] max-h-[512px] overflow-y-auto"
+	floatingConfig={{
+		strategy: 'fixed',
+		placement: 'left-start',
+		middleware: [offset(8), flip(), shift()]
+	}}
+	containerClasses="border rounded-lg shadow-lg bg-surface p-4  max-h-[512px] overflow-y-auto"
 >
 	<svelte:fragment slot="button">
 		<slot name="trigger" />