From 72aeba121cb694e8e96ad189b4acbfc2340bf520 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: Sat, 31 Dec 2022 13:37:23 +0100
Subject: [PATCH] fix(frontend): Static inputs overflow (#1057)

* fix(frontend): Static inputs overflow

* Update FlowConstantsItem.svelte

Co-authored-by: Ruben Fiszel <ruben@rubenfiszel.com>
---
 .../flows/content/FlowConstants.svelte          | 17 +++++++++--------
 .../flows/map/FlowConstantsItem.svelte          | 12 +++++-------
 .../flows/map/FlowModuleSchemaMap.svelte        |  6 +-----
 .../flows/map/FlowSettingsItem.svelte           | 12 +++++-------
 4 files changed, 20 insertions(+), 27 deletions(-)

diff --git a/frontend/src/lib/components/flows/content/FlowConstants.svelte b/frontend/src/lib/components/flows/content/FlowConstants.svelte
index 6494942105..83560198e7 100644
--- a/frontend/src/lib/components/flows/content/FlowConstants.svelte
+++ b/frontend/src/lib/components/flows/content/FlowConstants.svelte
@@ -38,10 +38,10 @@
 	})
 </script>
 
-<div class="h-full overflow-hidden">
+<div class="min-h-full">
 	<FlowCard title="All Static Inputs">
-		<div class="h-full flex-1">
-			<Alert type="info" title="Static Inputs"
+		<div class="min-h-full flex-1">
+			<Alert type="info" title="Static Inputs" class="m-4"
 				>This page centralizes the static inputs of every steps. It is akin to a file containing all
 				constants. Modifying a value here modify it in the step input directly. It is especially
 				useful when forking a flow to get an overview of all the variables to parametrize that are
@@ -50,11 +50,11 @@
 			{#if steps.length == 0}
 				<div class="mt-2" />
 				{#if $flowStore.value.modules.length == 0}
-					<Alert type="warning" title="No steps">
+					<Alert type="warning" title="No steps" class="m-4">
 						This flow has no steps. Add a step to see its static inputs.
 					</Alert>
 				{:else}
-					<Alert type="warning" title="No static inputs">
+					<Alert type="warning" title="No static inputs" class="m-4">
 						This flow has no steps with static inputs. Add a step with static inputs to see them
 						here.
 					</Alert>
@@ -62,9 +62,9 @@
 			{/if}
 			{#each steps as [args, filter, m] (m.id)}
 				{#if filter.length > 0}
-					<div class="box">
-						<h2 class="pb-4 inline-flex items-center"
-							><span class="mr-4">{m.summary || m.value['path'] || 'Inline script'}</span>
+					<div class="relative h-full border-t p-4">
+						<h2 class="sticky w-full top-0 z-10 inline-flex items-center bg-white py-2">
+							<span class="mr-4">{m.summary || m.value['path'] || 'Inline script'}</span>
 							<Badge large color="indigo">{m.id}</Badge>
 						</h2>
 
@@ -72,6 +72,7 @@
 							noDynamicToggle
 							inputTransform
 							{filter}
+							class="mt-2"
 							schema={$flowStateStore[m.id]?.schema ?? {}}
 							bind:args
 						/>
diff --git a/frontend/src/lib/components/flows/map/FlowConstantsItem.svelte b/frontend/src/lib/components/flows/map/FlowConstantsItem.svelte
index c7453e2ad5..b78f36f138 100644
--- a/frontend/src/lib/components/flows/map/FlowConstantsItem.svelte
+++ b/frontend/src/lib/components/flows/map/FlowConstantsItem.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
 	import type { FlowEditorContext } from '../types'
 	import { getContext } from 'svelte'
-	import Icon from 'svelte-awesome'
-	import { faDollarSign } from '@fortawesome/free-solid-svg-icons'
 	import { classNames } from '$lib/utils'
+	import { DollarSign } from 'lucide-svelte'
 
 	const { select, selectedId } = getContext<FlowEditorContext>('FlowEditorContext')
 
@@ -13,10 +12,9 @@
 	)
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<div on:click={() => select('constants')} class={settingsClass}>
-	<Icon data={faDollarSign} class="mr-2" />
-	<span class="text-xs flex flex-row justify-between w-full gap-2 items-center truncate">
+<button on:click={() => select('constants')} class={settingsClass}>
+	<DollarSign size={16} />
+	<span class="text-xs flex flex-row justify-between w-full gap-2 items-center truncate ml-1">
 		All Static Inputs
 	</span>
-</div>
+</button>
diff --git a/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte b/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte
index a1bf0af859..5c719e2e9c 100644
--- a/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte
+++ b/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte
@@ -106,13 +106,9 @@
 <div class="flex flex-col h-full relative">
 	{#if root}
 		<div
-			class="z-10 sticky inline-flex top-0 bg-gray-50 flex-initial  px-3 py-2 items-center h-full max-h-12 border-b border-gray-300"
+			class="z-10 sticky inline-flex flex-col gap-2 top-0 bg-gray-50 flex-initial p-2 items-center border-b border-gray-300"
 		>
 			<FlowSettingsItem />
-		</div>
-		<div
-			class="z-10 sticky inline-flex top-0 bg-gray-50 flex-initial  px-3 py-2 items-center h-full max-h-12 border-b border-gray-300"
-		>
 			<FlowConstantsItem />
 		</div>
 	{/if}
diff --git a/frontend/src/lib/components/flows/map/FlowSettingsItem.svelte b/frontend/src/lib/components/flows/map/FlowSettingsItem.svelte
index bf34b88fd0..12c6e193a5 100644
--- a/frontend/src/lib/components/flows/map/FlowSettingsItem.svelte
+++ b/frontend/src/lib/components/flows/map/FlowSettingsItem.svelte
@@ -1,11 +1,10 @@
 <script lang="ts">
 	import type { FlowEditorContext } from '../types'
 	import { getContext } from 'svelte'
-	import Icon from 'svelte-awesome'
-	import { faSliders } from '@fortawesome/free-solid-svg-icons'
 	import { classNames } from '$lib/utils'
 	import { Badge } from '$lib/components/common'
 	import { flowStore } from '../flowStore'
+	import { SlidersHorizontal } from 'lucide-svelte'
 
 	const { select, selectedId } = getContext<FlowEditorContext>('FlowEditorContext')
 
@@ -17,14 +16,13 @@
 	)
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<div on:click={() => select('settings-metadata')} class={settingsClass}>
-	<Icon data={faSliders} class="mr-2" />
-	<span class="text-xs font-bold flex flex-row justify-between w-full gap-2 items-center truncate">
+<button on:click={() => select('settings-metadata')} class={settingsClass}>
+	<SlidersHorizontal size={16} />
+	<span class="text-xs font-bold flex flex-row justify-between w-full gap-2 items-center truncate ml-1">
 		Settings
 
 		{#if $flowStore.value.same_worker}
 			<Badge color="blue" baseClass="truncate">./shared</Badge>
 		{/if}
 	</span>
-</div>
+</button>