From 76a860fe538dadfc6691074384f92db1a331063d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81d=C3=A1m=20Kov=C3=A1cs?=
 <43071496+adam-kov@users.noreply.github.com>
Date: Mon, 2 Jan 2023 19:05:29 +0100
Subject: [PATCH] fix(frontend): Remove popover hover styles (#1064)

---
 frontend/src/lib/components/Popover.svelte          | 13 ++++++++-----
 .../flows/content/FlowModuleHeader.svelte           | 12 ++++++------
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/frontend/src/lib/components/Popover.svelte b/frontend/src/lib/components/Popover.svelte
index 94e78dbd2d..ef6612f762 100644
--- a/frontend/src/lib/components/Popover.svelte
+++ b/frontend/src/lib/components/Popover.svelte
@@ -1,11 +1,14 @@
 <script lang="ts">
 	import { createPopperActions } from 'svelte-popperjs'
 
-	export let notClickable = false
+	const SIDE = ['auto', 'top', 'bottom', 'left', 'right'] as const
+	const ALIGN = ['start', 'end'] as const
 
-	const [popperRef, popperContent] = createPopperActions({
-		placement: 'auto'
-	})
+	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 })
 	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" />
diff --git a/frontend/src/lib/components/flows/content/FlowModuleHeader.svelte b/frontend/src/lib/components/flows/content/FlowModuleHeader.svelte
index c74b67959b..3ad1a1302c 100644
--- a/frontend/src/lib/components/flows/content/FlowModuleHeader.svelte
+++ b/frontend/src/lib/components/flows/content/FlowModuleHeader.svelte
@@ -1,10 +1,8 @@
 <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'
 
@@ -12,14 +10,13 @@
 
 	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'