From 696b69b7a1d0dfada1143e163bb9103762f1b60b Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Wed, 13 Mar 2024 19:27:37 +0100
Subject: [PATCH] fix: tabs can now be moved within apps

---
 .../ArrayStaticInputEditor.svelte             |  3 +--
 .../apps/editor/settingsPanel/GridTab.svelte  | 27 ++++++++++---------
 2 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/ArrayStaticInputEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/ArrayStaticInputEditor.svelte
index 4ce9d363bb..100ff30b5f 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/ArrayStaticInputEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/ArrayStaticInputEditor.svelte
@@ -4,7 +4,6 @@
 	import { createEventDispatcher } from 'svelte'
 	import type { InputType, StaticInput, StaticOptions } from '../../inputType'
 	import SubTypeEditor from './SubTypeEditor.svelte'
-	import { flip } from 'svelte/animate'
 	import { dndzone, SOURCES, TRIGGERS } from 'svelte-dnd-action'
 	import { generateRandomString, pluralize } from '$lib/utils'
 	import Toggle from '$lib/components/Toggle.svelte'
@@ -280,7 +279,7 @@
 			on:finalize={handleFinalize}
 		>
 			{#each items as item, index (item.id)}
-				<div animate:flip={{ duration: flipDurationMs }} class="border-0 outline-none w-full">
+				<div class="border-0 outline-none w-full">
 					<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 
 					<div class="flex flex-row gap-2 items-center relative my-1 w-full">
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte
index 793870bfec..3b89208eb5 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte
@@ -181,21 +181,24 @@
 							<CloseButton noBg on:close={() => deleteSubgrid(index)} />
 						</div>
 
-						<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+						<div class="flex flex-col justify-center gap-2">
+							<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 
-						<!-- svelte-ignore a11y-no-static-element-interactions -->
-						<div
-							tabindex={dragDisabled ? 0 : -1}
-							class="w-4 h-4"
-							on:mousedown={startDrag}
-							on:touchstart={startDrag}
-							on:keydown={handleKeyDown}
-							aria-label="drag-handle"
-							style={dragDisabled ? 'cursor: grab' : 'cursor: grabbing'}
-						>
-							<GripVertical size={16} />
+							<!-- svelte-ignore a11y-no-static-element-interactions -->
+							<div
+								tabindex={dragDisabled ? 0 : -1}
+								class="w-4 h-4"
+								on:mousedown={startDrag}
+								on:touchstart={startDrag}
+								on:keydown={handleKeyDown}
+								aria-label="drag-handle"
+								style={dragDisabled ? 'cursor: grab' : 'cursor: grabbing'}
+							>
+								<GripVertical size={16} />
+							</div>
 						</div>
 					</div>
+
 					{#if canDisableTabs && disabledTabs}
 						<GridTabDisabled bind:field={disabledTabs[index]} id={component.id} />
 					{/if}