From a352d85b0ba4756226b98032e0879a9f91bb20e4 Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Tue, 6 Feb 2024 18:34:35 +0100
Subject: [PATCH] fix(frontend): fix toggles margins (#3165)

---
 .../src/lib/components/ScheduleEditorInner.svelte  |  8 ++++++--
 .../inputEditor/StaticInputEditor.svelte           |  2 +-
 .../components/flows/content/FlowSettings.svelte   |  1 +
 .../flows/map/FlowErrorHandlerItem.svelte          | 14 ++++++--------
 frontend/src/lib/components/home/ItemsList.svelte  |  3 +--
 5 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/frontend/src/lib/components/ScheduleEditorInner.svelte b/frontend/src/lib/components/ScheduleEditorInner.svelte
index f1f15e370b..44ee2b72a6 100644
--- a/frontend/src/lib/components/ScheduleEditorInner.svelte
+++ b/frontend/src/lib/components/ScheduleEditorInner.svelte
@@ -520,10 +520,14 @@
 					/>
 				{/if}
 				{#if itemKind == 'flow'}
-					<Toggle options={{ right: 'no overlap of flows' }} bind:checked={no_flow_overlap} />
+					<Toggle
+						options={{ right: 'no overlap of flows' }}
+						bind:checked={no_flow_overlap}
+						class="mt-2"
+					/>
 				{/if}
 				{#if itemKind == 'script'}
-					<div class="flex gap-2 items-center">
+					<div class="flex gap-2 items-center mt-2">
 						<Toggle options={{ right: 'no overlap' }} checked={true} disabled /><Tooltip
 							>Currently, overlapping scripts' executions is not supported. The next execution will
 							be scheduled only after the previous iteration has completed.</Tooltip
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte
index d6c36d12c6..995ae0e7e1 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte
@@ -43,7 +43,7 @@
 		{:else if fieldType === 'date'}
 			<input on:keydown|stopPropagation type="date" bind:value={componentInput.value} />
 		{:else if fieldType === 'boolean'}
-			<Toggle bind:checked={componentInput.value} size="xs" />
+			<Toggle bind:checked={componentInput.value} size="xs" class="mt-2" />
 		{:else if fieldType === 'select' && selectOptions}
 			<select on:keydown|stopPropagation bind:value={componentInput.value}>
 				{#each selectOptions ?? [] as option}
diff --git a/frontend/src/lib/components/flows/content/FlowSettings.svelte b/frontend/src/lib/components/flows/content/FlowSettings.svelte
index 371e1aa790..56cd0a6816 100644
--- a/frontend/src/lib/components/flows/content/FlowSettings.svelte
+++ b/frontend/src/lib/components/flows/content/FlowSettings.svelte
@@ -284,6 +284,7 @@
 								options={{
 									right: 'Shared Directory on `./shared`'
 								}}
+								class="mt-2"
 							/>
 						</Section>
 					</TabContent>
diff --git a/frontend/src/lib/components/flows/map/FlowErrorHandlerItem.svelte b/frontend/src/lib/components/flows/map/FlowErrorHandlerItem.svelte
index 981f88b4bc..05b821006e 100644
--- a/frontend/src/lib/components/flows/map/FlowErrorHandlerItem.svelte
+++ b/frontend/src/lib/components/flows/map/FlowErrorHandlerItem.svelte
@@ -77,12 +77,10 @@
 			</span>
 		{/if}
 	</div>
-	<div class="-my-1">
-		<Toggle
-			size={small ? 'xs' : 'sm'}
-			checked={Boolean($flowStore?.value?.failure_module)}
-			on:change={onToggle}
-			id="error-handler-toggle"
-		/>
-	</div>
+	<Toggle
+		size={small ? 'xs' : 'sm'}
+		checked={Boolean($flowStore?.value?.failure_module)}
+		on:change={onToggle}
+		id="error-handler-toggle"
+	/>
 </div>
diff --git a/frontend/src/lib/components/home/ItemsList.svelte b/frontend/src/lib/components/home/ItemsList.svelte
index 8bacfb7617..825190d052 100644
--- a/frontend/src/lib/components/home/ItemsList.svelte
+++ b/frontend/src/lib/components/home/ItemsList.svelte
@@ -397,7 +397,7 @@
 			<div class="mt-10" />
 		{/if}
 		{#if !loading}
-			<div class="flex w-full flex-row-reverse gap-2 mt-2">
+			<div class="flex w-full flex-row-reverse gap-2 mt-4 mb-1 items-center h-6">
 				<Toggle size="xs" bind:checked={archived} options={{ right: 'Show archived' }} />
 				{#if $userStore?.is_super_admin && $userStore.username.includes('@')}
 					<Toggle size="xs" bind:checked={filterUserFolders} options={{ right: 'Only f/*' }} />
@@ -411,7 +411,6 @@
 				<Toggle size="xs" bind:checked={treeView} options={{ right: 'Tree view' }} />
 				{#if treeView}
 					<Button
-						wrapperClasses="mt-1"
 						btnClasses="py-0 h-6"
 						size="xs"
 						variant="border"