From 518bf23005c2d52db6c0dc89ec1356635bbdf32b Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Sat, 8 Jul 2023 13:40:27 +0200
Subject: [PATCH] fix(frontend): Fix multi select custom css (#1813)

* fix(frontend): Fix multi select custom css

* fix(frontend): Fix wording
---
 .../src/lib/components/ScriptBuilder.svelte   |  4 +++-
 .../components/inputs/AppMultiSelect.svelte   | 20 ++++++++++++-------
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/frontend/src/lib/components/ScriptBuilder.svelte b/frontend/src/lib/components/ScriptBuilder.svelte
index df2c7159d5..089b8dde94 100644
--- a/frontend/src/lib/components/ScriptBuilder.svelte
+++ b/frontend/src/lib/components/ScriptBuilder.svelte
@@ -341,7 +341,9 @@
 						script.language = Script.language.BUN
 					}}
 				>
-					<LanguageIcon lang="bun" /><span class="ml-2 py-2">Typescript (Bun, experimental)</span>
+					<LanguageIcon lang={Script.language.BUN} /><span class="ml-2 py-2">
+						Typescript (Bun, experimental)
+					</span>
 				</Button>
 
 				<!-- <Button
diff --git a/frontend/src/lib/components/apps/components/inputs/AppMultiSelect.svelte b/frontend/src/lib/components/apps/components/inputs/AppMultiSelect.svelte
index 8cc79a097a..a394053058 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppMultiSelect.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppMultiSelect.svelte
@@ -66,7 +66,17 @@
 
 	$: css = concatCustomCss($app.css?.multiselectcomponent, customCss)
 
-	$: outerDiv && css?.multiselect?.style && outerDiv.setAttribute('style', css?.multiselect?.style)
+	function setOuterDivStyle(outerDiv: HTMLDivElement, portalRef: HTMLDivElement, style: string) {
+		outerDiv.setAttribute('style', style)
+		// find ul in portalRef and set style
+		const ul = portalRef.querySelector('ul')
+		ul?.setAttribute('style', style)
+	}
+
+	$: outerDiv &&
+		portalRef &&
+		css?.multiselect?.style &&
+		setOuterDivStyle(outerDiv, portalRef, css?.multiselect?.style)
 
 	let outerDiv: HTMLDivElement | undefined = undefined
 	let portalRef: HTMLDivElement | undefined = undefined
@@ -131,17 +141,13 @@
 						open = false
 					}}
 				>
-					<div slot="option" let:option class="hover:bg-gray-200 p-1 cursor-pointer z-50">
+					<div slot="option" let:option>
 						{option}
 					</div>
 				</MultiSelect>
 				<Portal>
 					<div use:floatingContent class="z5000" hidden={!open}>
-						<div
-							bind:this={portalRef}
-							class="bg-white w-full border shadow-md rounded-md"
-							style={`min-width: ${w}px; `}
-						/>
+						<div bind:this={portalRef} class="multiselect" style={`min-width: ${w}px;`} />
 					</div>
 				</Portal>
 			</div>