windmill-components 1.89.0 → 1.103.0

package/package/components/apps/editor/inlineScriptsPanel/InlineScriptRunnableByPath.svelte

@@ -0,0 +1,161 @@
+<script>import { Button, Drawer, DrawerContent } from '../../../common';
+import FlowModuleScript from '../../../flows/content/FlowModuleScript.svelte';
+import FlowPathViewer from '../../../flows/content/FlowPathViewer.svelte';
+import { emptySchema } from '../../../../utils';
+import { getContext, tick } from 'svelte';
+import { faCodeBranch, faExternalLinkAlt, faEye, faPen, faRefresh, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
+import { workspaceStore } from '../../../../stores';
+import { createEventDispatcher } from 'svelte';
+import { deepEqual } from 'fast-equals';
+import { computeFields } from './utils';
+import { loadSchema } from '../../utils';
+import { inferArgs } from '../../../../infer';
+import RunButton from './RunButton.svelte';
+import { getScriptByPath } from '../../../../scripts';
+import { sendUserToast } from '../../../../toast';
+export let runnable;
+export let fields;
+export let id;
+const { stateId } = getContext('AppViewerContext');
+let drawerFlowViewer;
+let flowPath = '';
+const dispatch = createEventDispatcher();
+async function refreshScript(x) {
+    let { schema } = await getScriptByPath(x.path);
+    if (!deepEqual(x.schema, schema)) {
+        x.schema = schema;
+        fields = computeFields(schema, false, fields);
+    }
+}
+async function refreshFlow(x) {
+    const { schema } = (await loadSchema($workspaceStore ?? '', x.path, 'flow')) ?? emptySchema();
+    if (!deepEqual(x.schema, schema)) {
+        x.schema = schema;
+        fields = computeFields(schema, false, fields);
+    }
+}
+async function fork(path) {
+    let { content, language, schema } = await getScriptByPath(path);
+    if (!schema || typeof schema == 'string' || Object.keys(schema).length == 0) {
+        schema = emptySchema();
+        await inferArgs(language, content, schema);
+    }
+    dispatch('fork', {
+        type: 'runnableByName',
+        name: path,
+        inlineScript: {
+            content,
+            language,
+            schema,
+            path
+        }
+    });
+}
+function refresh() {
+    if (runnable.runType == 'script') {
+        refreshScript(runnable);
+    }
+    else if (runnable.runType == 'flow') {
+        refreshFlow(runnable);
+    }
+}
+$: runnable.runType && refresh();
+</script>
+
+<Drawer bind:this={drawerFlowViewer} size="1200px">
+	<DrawerContent title="Flow {flowPath}" on:close={drawerFlowViewer.closeDrawer}>
+		<FlowPathViewer path={flowPath ?? ''} />
+	</DrawerContent>
+</Drawer>
+
+<div class="p-2 h-full flex flex-col gap-2">
+	<div class="flex flex-row-reverse w-full gap-2">
+		<RunButton hideShortcut {id} />
+
+		<Button
+			variant="border"
+			size="xs"
+			startIcon={{ icon: faRefresh }}
+			on:click={async () => {
+				sendUserToast('Refreshing inputs')
+				refresh()
+				$stateId = $stateId + 1
+				await tick()
+			}}
+		>
+			Refresh
+		</Button>
+		<Button
+			size="xs"
+			variant="border"
+			color="red"
+			startIcon={{ icon: faTrashAlt }}
+			on:click={() => {
+				dispatch('delete')
+			}}
+		>
+			Clear
+		</Button>
+		{#if runnable.runType == 'flow'}
+			<Button
+				variant="border"
+				size="xs"
+				startIcon={{ icon: faEye }}
+				on:click={() => {
+					flowPath = runnable.path
+					drawerFlowViewer.openDrawer()
+				}}
+			>
+				Expand
+			</Button>
+			<Button
+				variant="border"
+				size="xs"
+				startIcon={{ icon: faPen }}
+				endIcon={{ icon: faExternalLinkAlt }}
+				target="_blank"
+				href="/flows/edit/{runnable.path}?nodraft=true">Edit</Button
+			>
+			<Button
+				variant="border"
+				size="xs"
+				startIcon={{ icon: faEye }}
+				endIcon={{ icon: faExternalLinkAlt }}
+				target="_blank"
+				href="/flows/get/{runnable.path}?workspace={$workspaceStore}"
+			>
+				Details page
+			</Button>
+		{:else}
+			<Button
+				size="xs"
+				variant="border"
+				startIcon={{ icon: faCodeBranch }}
+				on:click={() => {
+					fork(runnable.path)
+				}}
+			>
+				Fork
+			</Button>
+		{/if}
+		<input
+			on:keydown|stopPropagation
+			bind:value={runnable.name}
+			placeholder="Background runnable name"
+			class="!text-xs !rounded-xs"
+		/>
+	</div>
+	<div class="w-full">
+		{#key $stateId}
+			{#if runnable.runType == 'script' || runnable.runType == 'hubscript'}
+				<div class="border">
+					<FlowModuleScript path={runnable.path} />
+				</div>
+			{:else if runnable.runType == 'flow'}
+				<FlowPathViewer path={runnable.path} />
+			{:else}
+				Unrecognized runType {runnable.runType}
+			{/if}
+		{/key}
+	</div>
+</div>

package/package/components/apps/editor/inlineScriptsPanel/InlineScriptRunnableByPath.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ConnectedAppInput, RowAppInput, RunnableByPath, StaticAppInput, UserAppInput } from '../../inputType';
+declare const __propDef: {
+    props: {
+        runnable: RunnableByPath;
+        fields: Record<string, StaticAppInput | ConnectedAppInput | RowAppInput | UserAppInput>;
+        id: string;
+    };
+    events: {
+        keydown: KeyboardEvent;
+        delete: CustomEvent<any>;
+        fork: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type InlineScriptRunnableByPathProps = typeof __propDef.props;
+export type InlineScriptRunnableByPathEvents = typeof __propDef.events;
+export type InlineScriptRunnableByPathSlots = typeof __propDef.slots;
+export default class InlineScriptRunnableByPath extends SvelteComponentTyped<InlineScriptRunnableByPathProps, InlineScriptRunnableByPathEvents, InlineScriptRunnableByPathSlots> {
+}
+export {};

package/package/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte

@@ -3,9 +3,10 @@ import SplitPanesWrapper from '../../../splitPanes/SplitPanesWrapper.svelte';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
 import InlineScriptsPanelList from './InlineScriptsPanelList.svelte';
 import InlineScriptEditor from './InlineScriptEditor.svelte';
-import EmptyInlineScript from './EmptyInlineScript.svelte';
 import InlineScriptsPanelWithTable from './InlineScriptsPanelWithTable.svelte';
 import { findGridItem } from '../appUtils';
+import InlineScriptHiddenRunnable from './InlineScriptHiddenRunnable.svelte';
+import { BG_PREFIX } from '../../utils';
 const { app, runnableComponents } = getContext('AppViewerContext');
 const { selectedComponentInEditor } = getContext('AppEditorContext');
 function deleteBackgroundScript(index) {
@@ -15,17 +16,24 @@ function deleteBackgroundScript(index) {
         $app.hiddenInlineScripts = [...$app.hiddenInlineScripts];
     }
     else {
-        $app.hiddenInlineScripts[index].inlineScript = undefined;
-        $app.hiddenInlineScripts[index].name = `Background Script ${index}`;
+        $app.hiddenInlineScripts[index] = {
+            hidden: true,
+            inlineScript: undefined,
+            name: `Background Runnable ${index}`,
+            fields: {},
+            type: 'runnableByName',
+            recomputeIds: undefined
+        };
         $app.hiddenInlineScripts = $app.hiddenInlineScripts;
     }
-    delete $runnableComponents[`bg_${index}`];
+    $selectedComponentInEditor = undefined;
+    delete $runnableComponents[BG_PREFIX + index];
 }
 $: gridItem =
-    $selectedComponentInEditor && !$selectedComponentInEditor.startsWith('bg_')
+    $selectedComponentInEditor && !$selectedComponentInEditor.startsWith(BG_PREFIX)
         ? findGridItem($app, $selectedComponentInEditor?.split('_')?.[0])
         : undefined;
-$: hiddenInlineScript = $app?.hiddenInlineScripts?.findIndex((k_, index) => `bg_${index}` === $selectedComponentInEditor);
+$: hiddenInlineScript = $app?.hiddenInlineScripts?.findIndex((k_, index) => BG_PREFIX + index === $selectedComponentInEditor);
 $: unusedInlineScript = $app?.unusedInlineScripts?.findIndex((k_, index) => `unused-${index}` === $selectedComponentInEditor);
 </script>
 
@@ -58,27 +66,12 @@ $: unusedInlineScript = $app?.unusedInlineScripts?.findIndex((k_, index) => `unu
 				{/key}
 			{:else if hiddenInlineScript > -1}
 				{#key hiddenInlineScript}
-					{#if $app.hiddenInlineScripts?.[hiddenInlineScript]?.inlineScript}
-						<InlineScriptEditor
-							id={`bg_${hiddenInlineScript}`}
-							bind:inlineScript={$app.hiddenInlineScripts[hiddenInlineScript].inlineScript}
-							bind:name={$app.hiddenInlineScripts[hiddenInlineScript].name}
-							bind:fields={$app.hiddenInlineScripts[hiddenInlineScript].fields}
-							syncFields
+					{#if $app.hiddenInlineScripts?.[hiddenInlineScript]}
+						<InlineScriptHiddenRunnable
 							on:delete={() => deleteBackgroundScript(hiddenInlineScript)}
-						/>
-					{:else}
-						<EmptyInlineScript
-							name={$app.hiddenInlineScripts[hiddenInlineScript].name}
-							on:delete={() => deleteBackgroundScript(hiddenInlineScript)}
-							on:new={(e) => {
-								if ($app.hiddenInlineScripts[hiddenInlineScript]) {
-									$app.hiddenInlineScripts[hiddenInlineScript].inlineScript = e.detail
-								}
-							}}
-						/>
-					{/if}
-				{/key}
+							id={BG_PREFIX + hiddenInlineScript}
+							bind:runnable={$app.hiddenInlineScripts[hiddenInlineScript]}
+						/>{/if}{/key}
 			{:else}
 				<div class="text-sm text-gray-500 text-center py-8 px-2">
 					No script found at id {$selectedComponentInEditor}

package/package/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelList.svelte

@@ -2,7 +2,7 @@
 import { Plus } from 'lucide-svelte';
 import { getContext } from 'svelte';
 import Tooltip from '../../../Tooltip.svelte';
-import { getAllScriptNames } from '../../utils';
+import { BG_PREFIX, getAllScriptNames } from '../../utils';
 import PanelSection from '../settingsPanel/common/PanelSection.svelte';
 import { getAppScripts } from './utils';
 const PREFIX = 'script-selector-';
@@ -10,23 +10,34 @@ const { app, selectedComponent } = getContext('AppViewerContext');
 const { selectedComponentInEditor } = getContext('AppEditorContext');
 function selectScript(id) {
     $selectedComponentInEditor = id;
-    if (!id.startsWith('unused-') || !id.startsWith('bg_')) {
+    if (!id.startsWith('unused-') || !id.startsWith(BG_PREFIX)) {
         $selectedComponent = [$selectedComponentInEditor.split('_transformer')[0]];
     }
 }
 $: runnables = getAppScripts($app.grid, $app.subgrids);
 // When selected component changes, update selectedScriptComponentId
-$: if ($selectedComponent != $selectedComponentInEditor &&
-    !$selectedComponentInEditor?.includes('_transformer')) {
-    $selectedComponentInEditor = $selectedComponent?.[0];
+$: handleSelectedComponent($selectedComponent);
+function handleSelectedComponent(selectedComponent) {
+    if (selectedComponent != $selectedComponentInEditor &&
+        !$selectedComponentInEditor?.includes('_transformer')) {
+        $selectedComponentInEditor = selectedComponent?.[0];
+    }
 }
 function createBackgroundScript() {
+    for (const [index, script] of $app.hiddenInlineScripts.entries()) {
+        if (script.hidden) {
+            delete script.hidden;
+            $app.hiddenInlineScripts = $app.hiddenInlineScripts;
+            selectScript(BG_PREFIX + index);
+            return;
+        }
+    }
     let index = 0;
-    let newScriptPath = `Background Script ${index}`;
+    let newScriptPath = `Background Runnable ${index}`;
     const names = getAllScriptNames($app);
     // Find a name that is not used by any other inline script
     while (names.includes(newScriptPath)) {
-        newScriptPath = `Background Script ${++index}`;
+        newScriptPath = `Background Runnable ${++index}`;
     }
     if (!$app.hiddenInlineScripts) {
         $app.hiddenInlineScripts = [];
@@ -35,17 +46,18 @@ function createBackgroundScript() {
         name: newScriptPath,
         inlineScript: undefined,
         autoRefresh: true,
-        fields: {}
+        type: 'runnableByName',
+        fields: {},
+        recomputeIds: undefined
     });
     $app.hiddenInlineScripts = $app.hiddenInlineScripts;
-    selectScript(`bg_${$app.hiddenInlineScripts.length - 1}`);
+    selectScript(`${BG_PREFIX}${$app.hiddenInlineScripts.length - 1}`);
 }
 </script>
 
 <PanelSection title="Runnables">
 	<div class="w-full flex flex-col gap-6 py-1">
 		<div>
-			<div class="text-sm font-semibold truncate mb-1"> Inline scripts </div>
 			<div class="flex flex-col gap-2 w-full">
 				{#if runnables.inline.length > 0}
 					<div class="flex gap-1 flex-col">
@@ -58,7 +70,7 @@ function createBackgroundScript() {
 							>
 								<span class="text-2xs truncate">{name}</span>
 								<div>
-									<Badge color="dark-indigo">{id}</Badge>
+									<Badge color="indigo">{id}</Badge>
 								</div>
 							</button>
 							{#if transformer}
@@ -78,6 +90,32 @@ function createBackgroundScript() {
 						{/each}
 					</div>
 				{/if}
+				{#each runnables.imported as { name, id, transformer }, index (index)}
+					<button
+						id={PREFIX + id}
+						class="panel-item
+						{$selectedComponentInEditor === id ? 'border-blue-500 bg-blue-100' : 'hover:bg-blue-50'}"
+						on:click={() => selectScript(id)}
+					>
+						<span class="text-2xs truncate">{name}</span>
+						<Badge color="indigo">{id}</Badge>
+					</button>
+					{#if transformer}
+						<div class="w-full pl-4">
+							<button
+								id={PREFIX + id + '_transformer'}
+								class="border flex gap-1 truncate font-normal justify-between w-full items-center px-2 py-0.5 rounded-sm duration-200;
+{$selectedComponentInEditor === id + '_transformer'
+									? 'border-blue-500 bg-blue-100'
+									: 'hover:bg-blue-50'}"
+								on:click={() => selectScript(id + '_transformer')}
+							>
+								<span class="text-2xs truncate">Transformer</span>
+							</button>
+						</div>
+					{/if}
+				{/each}
+
 				{#if $app.unusedInlineScripts?.length > 0}
 					<div class="flex gap-1 flex-col">
 						{#each $app.unusedInlineScripts as unusedInlineScript, index (index)}
@@ -94,54 +132,22 @@ function createBackgroundScript() {
 						{/each}
 					</div>
 				{/if}
-				{#if runnables.inline.length == 0 && $app.unusedInlineScripts?.length == 0}
-					<div class="text-xs text-gray-500">No inline scripts</div>
-				{/if}
-			</div>
-		</div>
-
-		<div>
-			<div class="text-sm font-semibold truncate mb-1"> Workspace/Hub </div>
-			<div class="flex flex-col gap-1 w-full">
-				{#if runnables.imported.length > 0}
-					{#each runnables.imported as { name, id, transformer }, index (index)}
-						<button
-							id={PREFIX + id}
-							class="panel-item
-								{$selectedComponentInEditor === id ? 'border-blue-500 bg-blue-100' : 'hover:bg-blue-50'}"
-							on:click={() => selectScript(id)}
-						>
-							<span class="text-2xs truncate">{name}</span>
-							<Badge color="dark-indigo">{id}</Badge>
-						</button>
-						{#if transformer}
-							<div class="w-full pl-4">
-								<button
-									id={PREFIX + id + '_transformer'}
-									class="border flex gap-1 truncate font-normal justify-between w-full items-center px-2 py-0.5 rounded-sm duration-200;
-	{$selectedComponentInEditor === id + '_transformer'
-										? 'border-blue-500 bg-blue-100'
-										: 'hover:bg-blue-50'}"
-									on:click={() => selectScript(id + '_transformer')}
-								>
-									<span class="text-2xs truncate">Transformer</span>
-								</button>
-							</div>
-						{/if}
-					{/each}
-				{:else}
-					<div class="text-xs text-gray-500">No imported scripts/flows</div>
+				{#if runnables.inline.length == 0 && $app.unusedInlineScripts?.length == 0 && runnables.imported.length == 0}
+					<div class="text-xs text-gray-500">No scripts/flows</div>
 				{/if}
 			</div>
 		</div>
 
 		<div>
 			<div class="w-full flex justify-between items-center mb-1">
-				<div class="text-sm font-semibold truncate">
-					Background scripts
-					<Tooltip class="mb-0.5">
-						Background scripts are triggered upon global refresh or when their input changes. The
-						result of a background script can be shared among many components.
+				<div class="text-xs text-gray-600 font-semibold truncate">
+					Background runnables
+					<Tooltip
+						class="mb-0.5"
+						documentationLink="https://docs.windmill.dev/docs/apps/app-runnable#background-runnable"
+					>
+						Background runnables are triggered upon global refresh or when their input changes. The
+						result of a background runnable can be shared among many components.
 					</Tooltip>
 				</div>
 				<Button
@@ -149,8 +155,8 @@ function createBackgroundScript() {
 					color="light"
 					variant="border"
 					btnClasses="!rounded-full !p-1"
-					title="Create a new background script"
-					aria-label="Create a new background script"
+					title="Create a new background runnable"
+					aria-label="Create a new background runnable"
 					on:click={createBackgroundScript}
 				>
 					<Plus size={14} class="text-gray-500" />
@@ -158,20 +164,22 @@ function createBackgroundScript() {
 			</div>
 			<div class="flex flex-col gap-1 w-full">
 				{#if $app.hiddenInlineScripts?.length > 0}
-					{#each $app.hiddenInlineScripts as { name }, index (index)}
-						{@const id = `bg_${index}`}
-						<button
-							id={PREFIX + id}
-							class="panel-item
+					{#each $app.hiddenInlineScripts as { name, hidden }, index (index)}
+						{#if !hidden}
+							{@const id = BG_PREFIX + index}
+							<button
+								id={PREFIX + id}
+								class="panel-item
 								{$selectedComponentInEditor === id ? 'border-blue-500 bg-blue-100' : 'hover:bg-blue-50'}"
-							on:click={() => selectScript(id)}
-						>
-							<span class="text-2xs truncate">{name}</span>
-							<Badge color="dark-indigo">{id}</Badge>
-						</button>
+								on:click={() => selectScript(id)}
+							>
+								<span class="text-2xs truncate">{name}</span>
+								<Badge color="indigo">{id}</Badge>
+							</button>
+						{/if}
 					{/each}
 				{:else}
-					<div class="text-xs text-gray-500">No background scripts</div>
+					<div class="text-xs text-gray-500">No background runnable</div>
 				{/if}
 			</div>
 		</div>

package/package/components/apps/editor/inlineScriptsPanel/RunButton.svelte

@@ -0,0 +1,55 @@
+<script>import { getContext } from 'svelte';
+import { Button, Kbd } from '../../../common';
+import { getModifierKey } from '../../../../utils';
+import { Loader2 } from 'lucide-svelte';
+export let id;
+export let inlineScript = undefined;
+export let runLoading = false;
+export let hideShortcut = false;
+const { runnableComponents } = getContext('AppViewerContext');
+let cancelable = undefined;
+</script>
+
+{#if $runnableComponents[id] != undefined}
+	{#if !runLoading}
+		<Button
+			loading={runLoading}
+			size="xs"
+			color="dark"
+			variant="border"
+			btnClasses="!px-2 !py-1 !bg-gray-700 !text-white hover:!bg-gray-900"
+			on:click={async () => {
+				runLoading = true
+				try {
+					cancelable = $runnableComponents[id]?.cb?.(inlineScript)
+					await cancelable
+				} catch {}
+				runLoading = false
+			}}
+		>
+			<div class="flex flex-row gap-1 items-center">
+				Run
+				{#if !hideShortcut}
+					<div class="flex flex-row items-center">
+						<Kbd small>{getModifierKey()}</Kbd>
+						<Kbd small><span class="text-lg font-bold">⏎</span></Kbd>
+					</div>
+				{/if}
+			</div>
+		</Button>
+	{:else}
+		<Button
+			size="xs"
+			color="red"
+			variant="border"
+			btnClasses="!px-2 !py-1.5"
+			on:click={async () => {
+				cancelable?.cancel()
+				runLoading = false
+			}}
+		>
+			<Loader2 size={14} class="animate-spin mr-2" />
+			Cancel
+		</Button>
+	{/if}
+{/if}

package/package/components/apps/editor/inlineScriptsPanel/RunButton.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+import type { InlineScript } from '../../types';
+declare const __propDef: {
+    props: {
+        id: string;
+        inlineScript?: InlineScript | undefined;
+        runLoading?: boolean | undefined;
+        hideShortcut?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type RunButtonProps = typeof __propDef.props;
+export type RunButtonEvents = typeof __propDef.events;
+export type RunButtonSlots = typeof __propDef.slots;
+export default class RunButton extends SvelteComponentTyped<RunButtonProps, RunButtonEvents, RunButtonSlots> {
+}
+export {};

package/package/components/apps/editor/inlineScriptsPanel/utils.js

@@ -18,7 +18,13 @@ export function computeFields(schema, defaultUserInput, fields) {
         else {
             if (fieldTypeToTsType(newInput.fieldType) !== fieldTypeToTsType(oldInput.fieldType) ||
                 newInput.format !== oldInput.format ||
-                newInput.subFieldType !== oldInput.subFieldType) {
+                newInput.subFieldType !== oldInput.subFieldType ||
+                // An input became a select
+                (newInput.fieldType === 'select' && oldInput.fieldType !== 'select') ||
+                // The input was already a select, but the values changed
+                (newInput.fieldType === 'select' &&
+                    oldInput.fieldType === 'select' &&
+                    JSON.stringify(newInput.selectOptions) !== JSON.stringify(oldInput.selectOptions))) {
                 result[key] = newInput;
             }
             else {

package/package/components/apps/editor/settingsPanel/AlignmentEditor.svelte

@@ -1,6 +1,5 @@
 <script>import { AlignCenterHorizontal, AlignCenterVertical, AlignEndHorizontal, AlignEndVertical, AlignStartHorizontal, AlignStartVertical } from 'lucide-svelte';
 import { getContext } from 'svelte';
-import PanelSection from './common/PanelSection.svelte';
 import ToggleButtonGroup from '../../../common/toggleButton-v2/ToggleButtonGroup.svelte';
 import ToggleButton from '../../../common/toggleButton-v2/ToggleButton.svelte';
 const { app } = getContext('AppViewerContext');
@@ -8,38 +7,29 @@ export let component;
 </script>
 
 {#if component.horizontalAlignment || component.verticalAlignment}
-	<PanelSection title="Alignment">
-		<div class="flex flex-col gap-2 w-full">
-			{#if component.horizontalAlignment}
-				<div class="flex flex-row justify-between items-center">
-					<div class="text-xs font-semibold">Horizontal</div>
-					<div>
-						<ToggleButtonGroup
-							on:selected={() => (component = component)}
-							bind:selected={component.horizontalAlignment}
-						>
-							<ToggleButton value="left" icon={AlignStartVertical} />
-							<ToggleButton value="center" icon={AlignCenterVertical} />
-							<ToggleButton value="right" icon={AlignEndVertical} />
-						</ToggleButtonGroup>
-					</div>
-				</div>
-			{/if}
-			{#if component.type !== 'formcomponent' && component.verticalAlignment}
-				<div class="flex flex-row justify-between items-center">
-					<div class="text-xs font-semibold">Vertical</div>
-					<div>
-						<ToggleButtonGroup
-							on:selected={() => ($app = $app)}
-							bind:selected={component.verticalAlignment}
-						>
-							<ToggleButton value="top" icon={AlignStartHorizontal} />
-							<ToggleButton value="center" icon={AlignCenterHorizontal} />
-							<ToggleButton value="bottom" icon={AlignEndHorizontal} />
-						</ToggleButtonGroup>
-					</div>
-				</div>
-			{/if}
-		</div>
-	</PanelSection>
+	<div class="flex flex-wrap gap-x-4 gap-y-1 w-full justify-end items-center">
+		<div class="text-gray-600 text-xs">Alignment</div>
+		{#if component.horizontalAlignment}
+			<ToggleButtonGroup
+				noWFull
+				on:selected={() => (component = component)}
+				bind:selected={component.horizontalAlignment}
+			>
+				<ToggleButton value="left" icon={AlignStartVertical} />
+				<ToggleButton value="center" icon={AlignCenterVertical} />
+				<ToggleButton value="right" icon={AlignEndVertical} />
+			</ToggleButtonGroup>
+		{/if}
+		{#if component.type !== 'formcomponent' && component.verticalAlignment}
+			<ToggleButtonGroup
+				noWFull
+				on:selected={() => ($app = $app)}
+				bind:selected={component.verticalAlignment}
+			>
+				<ToggleButton value="top" icon={AlignStartHorizontal} />
+				<ToggleButton value="center" icon={AlignCenterHorizontal} />
+				<ToggleButton value="bottom" icon={AlignEndHorizontal} />
+			</ToggleButtonGroup>
+		{/if}
+	</div>
 {/if}

package/package/components/apps/editor/settingsPanel/ArrayStaticInputEditor.svelte

@@ -101,7 +101,7 @@ function handleItemsChange() {
 }
 </script>
 
-<div class="flex gap-2 flex-col mt-2">
+<div class="flex gap-2 flex-col mt-2 w-full">
 	{#key redraw}
 		{#if Array.isArray(items) && componentInput.value}
 			<div class="text-xs text-gray-600 font-semibold">{pluralize(items.length, 'item')}</div>
@@ -120,7 +120,9 @@ function handleItemsChange() {
 						<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 
 						<div class="flex flex-row gap-2 items-center relative my-1">
-							<SubTypeEditor {subFieldType} bind:componentInput bind:value={item.value} />
+							<div class="grow overflow-x-auto">
+								<SubTypeEditor {subFieldType} bind:componentInput bind:value={item.value} />
+							</div>
 							<div class="flex justify-between flex-col items-center">
 								<div
 									tabindex={dragDisabled ? 0 : -1}