fix(frontend): Remove popover hover styles (#1064)

frontend/src/lib/components/Popover.svelte

@@ -1,11 +1,14 @@
 <script lang="ts">
 	import { createPopperActions } from 'svelte-popperjs'
 
+	const SIDE = ['auto', 'top', 'bottom', 'left', 'right'] as const
+	const ALIGN = ['start', 'end'] as const
+
+	export let placement: `${typeof SIDE[number]}` | `${typeof SIDE[number]}-${typeof ALIGN[number]}` = 'auto'
 	export let notClickable = false
+	export let popupClass = ''
 
-	const [popperRef, popperContent] = createPopperActions({
-		placement: 'auto'
-	})
+	const [popperRef, popperContent] = createPopperActions({ placement })
 	const betterPreventOverflow = (options) => ({
 		name: 'preventOverflow',
 		options,
@@ -56,7 +59,7 @@
 		on:mouseenter={open}
 		on:mouseleave={close}
 		class="z-50  py-2 px-3 rounded-md  text-sm font-normal !text-gray-300 bg-gray-800
-		whitespace-normal text-left {$$props.class}"
+		whitespace-normal text-left {popupClass}"
 	>
 		<div class="max-w-sm">
 			<slot name="text" />

frontend/src/lib/components/flows/content/FlowModuleHeader.svelte

@@ -1,25 +1,22 @@
 <script lang="ts">
 	import Button from '$lib/components/common/button/Button.svelte'
 	import type { FlowModule } from '$lib/gen'
-	import { classNames } from '$lib/utils'
-	import { faBed, faCodeBranch, faSave, faStop } from '@fortawesome/free-solid-svg-icons'
+	import { faCodeBranch, faSave } from '@fortawesome/free-solid-svg-icons'
 	import { createEventDispatcher } from 'svelte'
-	import Icon from 'svelte-awesome'
 	import { Bed, PhoneIncoming, Repeat, Square } from 'lucide-svelte'
 	import Popover from '../../Popover.svelte'
 
 	export let module: FlowModule
 
 	const dispatch = createEventDispatcher()
 
-	let width = 0
-
 	$: moduleRetry = module.retry?.constant || module.retry?.exponential
 </script>
 
-<div class="flex flex-row space-x-2" bind:clientWidth={width}>
+<div class="flex flex-row space-x-2">
 	{#if module.value.type === 'script' || module.value.type === 'rawscript'}
 		<Popover
+			placement="bottom"
 			class="center-center rounded border p-2 
 			{moduleRetry
 				? 'bg-blue-100 text-blue-800 border-blue-300 hover:bg-blue-200'
@@ -30,6 +27,7 @@
 			<svelte:fragment slot="text">Retries</svelte:fragment>
 		</Popover>
 		<Popover
+			placement="bottom"
 			class="center-center rounded border p-2
 			{module.stop_after_if
 				? 'bg-blue-100 text-blue-800 border-blue-300 hover:bg-blue-200'
@@ -40,6 +38,7 @@
 			<svelte:fragment slot="text">Early stop/break</svelte:fragment>
 		</Popover>
 		<Popover
+			placement="bottom"
 			class="center-center rounded border p-2 
 			{module.suspend
 				? 'bg-blue-100 text-blue-800 border-blue-300 hover:bg-blue-200'
@@ -50,6 +49,7 @@
 			<svelte:fragment slot="text">Suspend</svelte:fragment>
 		</Popover>
 		<Popover
+			placement="bottom"
 			class="center-center rounded border p-2
 			{module.sleep
 				? 'bg-blue-100 text-blue-800 border-blue-300 hover:bg-blue-200'