resize transition in module preview form

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']
 	])
 

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}

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>