fix(frontend): only forward css variable (#1856)

frontend/src/lib/components/apps/components/inputs/AppMultiSelect.svelte

@@ -11,6 +11,7 @@
 	import MultiSelect from 'svelte-multiselect'
 	import Portal from 'svelte-portal'
 	import { createFloatingActions } from 'svelte-floating-ui'
+	import { extractCustomProperties } from '$lib/utils'
 
 	export let id: string
 	export let configuration: RichConfigurations
@@ -70,7 +71,7 @@
 		outerDiv.setAttribute('style', style)
 		// find ul in portalRef and set style
 		const ul = portalRef.querySelector('ul')
-		ul?.setAttribute('style', style)
+		ul?.setAttribute('style', extractCustomProperties(style))
 	}
 
 	$: outerDiv &&

frontend/src/lib/components/apps/svelte-select/lib/Select.svelte

@@ -13,6 +13,7 @@
 	import ClearIcon from './ClearIcon.svelte'
 	import LoadingIcon from './LoadingIcon.svelte'
 	import ConditionalPortal from './ConditionalPortal.svelte'
+	import { extractCustomProperties } from '$lib/utils'
 
 	export let portal = true
 
@@ -608,7 +609,7 @@
 	{#if listOpen}
 		<ConditionalPortal condition={portal}>
 			<div
-				style={containerStyles}
+				style={extractCustomProperties(containerStyles)}
 				use:floatingContent
 				bind:this={list}
 				class="svelte-select-list"

frontend/src/lib/utils.ts

@@ -571,3 +571,11 @@ export function isObviousOwner(path: string, user?: UserExt): boolean {
 	}
 	return false
 }
+
+export function extractCustomProperties(styleStr: string): string {
+	let properties = styleStr.split(';')
+	let customProperties = properties.filter((property) => property.trim().startsWith('--'))
+	let customStyleStr = customProperties.join(';')
+
+	return customStyleStr
+}