From a4ac9de8d4e8a4d233ccfbb3410025543d0e4ff9 Mon Sep 17 00:00:00 2001
From: Diego Imbert <diego@windmill.dev>
Date: Wed, 24 Sep 2025 19:50:36 +0200
Subject: [PATCH] resize transition in module preview form

---
 .../src/lib/components/EditableSchemaForm.svelte    |  4 ++--
 .../src/lib/components/ModulePreviewForm.svelte     | 12 +++++++-----
 .../common/ResizeTransitionWrapper.svelte           | 13 +++++++++++--
 3 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/frontend/src/lib/components/EditableSchemaForm.svelte b/frontend/src/lib/components/EditableSchemaForm.svelte
index 9fcb71e7e0..f6293ad29b 100644
--- a/frontend/src/lib/components/EditableSchemaForm.svelte
+++ b/frontend/src/lib/components/EditableSchemaForm.svelte
@@ -358,11 +358,11 @@
 		['String', 'string'],
 		['Number', 'number'],
 		['Integer', 'integer'],
-		['Object', 'object'],
+		['Boolean', 'boolean'],
 		['Resource', 'resource'],
+		['Object', 'object'],
 		['OneOf', 'oneOf'],
 		['Array', 'array'],
-		['Boolean', 'boolean'],
 		['S3', 'S3']
 	])
 
diff --git a/frontend/src/lib/components/ModulePreviewForm.svelte b/frontend/src/lib/components/ModulePreviewForm.svelte
index 1a32024fb7..d83faaf143 100644
--- a/frontend/src/lib/components/ModulePreviewForm.svelte
+++ b/frontend/src/lib/components/ModulePreviewForm.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { Schema } from '$lib/common'
-
+	import ResizeTransitionWrapper from './common/ResizeTransitionWrapper.svelte'
 	import { allTrue } from '$lib/utils'
 	import { RefreshCw } from 'lucide-svelte'
 	import ArgInput from './ArgInput.svelte'
@@ -115,12 +115,14 @@
 		{#if keys.length > 0}
 			{#each keys as argName, i (argName)}
 				{#if Object.keys(schema.properties ?? {}).includes(argName)}
-					<div
+					<ResizeTransitionWrapper
+						vertical
 						class={twMerge(
-							'flex gap-2',
+							'flex gap-2 relative',
 							animateArg === argName && 'animate-pulse ring-2 ring-offset-2 ring-blue-500 rounded'
 						)}
-						data-arg={argName}
+						innerClass="w-full"
+						outerDivProps={{ 'data-arg': argName }}
 					>
 						{#if schema?.properties?.[argName]}
 							<ArgInput
@@ -166,7 +168,7 @@
 								{/snippet}
 							</ArgInput>
 						{/if}
-					</div>
+					</ResizeTransitionWrapper>
 				{/if}
 			{/each}
 		{/if}
diff --git a/frontend/src/lib/components/common/ResizeTransitionWrapper.svelte b/frontend/src/lib/components/common/ResizeTransitionWrapper.svelte
index a56fe7af31..b2689a603a 100644
--- a/frontend/src/lib/components/common/ResizeTransitionWrapper.svelte
+++ b/frontend/src/lib/components/common/ResizeTransitionWrapper.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements'
 	import { twMerge } from 'tailwind-merge'
 
 	type Props = {
@@ -7,8 +8,16 @@
 		class?: string
 		horizontal?: boolean
 		vertical?: boolean
+		outerDivProps?: HTMLAttributes<HTMLDivElement>
 	}
-	let { children, innerClass, class: className = '', horizontal, vertical }: Props = $props()
+	let {
+		children,
+		innerClass,
+		class: className = '',
+		horizontal,
+		vertical,
+		outerDivProps
+	}: Props = $props()
 
 	let innerContainer: HTMLElement | null = $state(null)
 	let outerContainer: HTMLElement | null = $state(null)
@@ -39,7 +48,7 @@
 	})
 </script>
 
-<div bind:this={outerContainer} class={className} {style}>
+<div bind:this={outerContainer} {...outerDivProps} class={className} {style}>
 	<div class={twMerge('absolute', innerClass)} bind:this={innerContainer}>
 		{@render children()}
 	</div>