windmill-components 1.550.0 → 1.555.0

package/package/components/InputTransformSchemaForm.svelte

@@ -8,6 +8,7 @@ import InputTransformForm from './InputTransformForm.svelte';
 import ItemPicker from './ItemPicker.svelte';
 import VariableEditor from './VariableEditor.svelte';
 import { Plus } from 'lucide-svelte';
+import ResizeTransitionWrapper from './common/ResizeTransitionWrapper.svelte';
 let { schema = $bindable(), args = $bindable({}), isValid = $bindable(true), extraLib = $bindable('missing extraLib'), previousModuleId = undefined, filter = undefined, noDynamicToggle = false, pickableProperties = undefined, enableAi = false, class: clazz = '', helperScript = undefined } = $props();
 let inputCheck = $state({});
 $effect(() => {
@@ -43,9 +44,9 @@ $effect(() => {
 });
 </script>
 
-<div class="w-full {clazz}">
+<div class="w-full mb-6 {clazz}">
 	{#if enableAi}
-		<div class="px-0.5 pt-0.5">
+		<div class="mt-2">
 			<StepInputsGen
 				{pickableProperties}
 				argNames={keys
@@ -64,7 +65,7 @@ $effect(() => {
 	{#if keys.length > 0}
 		{#each keys as argName, index (argName)}
 			{#if (!filter || filter.includes(argName)) && Object.keys(schema.properties ?? {}).includes(argName)}
-				<div class="pt-2 relative">
+				<ResizeTransitionWrapper class="mt-2 relative" innerClass="w-full" vertical>
 					<InputTransformForm
 						{previousModuleId}
 						bind:arg={args[argName]}
@@ -85,7 +86,7 @@ $effect(() => {
 							Object.entries(args ?? {}).filter(([key]) => key !== argName)
 						)}
 					/>
-				</div>
+				</ResizeTransitionWrapper>
 			{/if}
 		{/each}
 	{:else}

package/package/components/InstanceSetting.svelte

@@ -306,13 +306,21 @@ function handleChannelChange(channel, i) {
 						</div>
 					{/if}
 				{:else if setting.fieldType == 'codearea'}
-					<SimpleEditor
-						autoHeight
-						class="editor"
-						lang={setting.codeAreaLang ?? 'txt'}
-						bind:code={$values[setting.key]}
-						fixedOverflowWidgets={false}
-					/>
+					<!-- svelte-ignore a11y_click_events_have_key_events -->
+					<!-- svelte-ignore a11y_no_static_element_interactions -->
+					<div
+						onclick={(ev) => {
+							ev.stopPropagation() // this is to prevent wrapping label interference
+						}}
+					>
+						<SimpleEditor
+							autoHeight
+							class="editor"
+							lang={setting.codeAreaLang ?? 'txt'}
+							bind:code={$values[setting.key]}
+							fixedOverflowWidgets={false}
+						/></div
+					>
 				{:else if setting.fieldType == 'license_key'}
 					{@const { valid, expiration } = parseLicenseKey($values[setting.key] ?? '')}
 					<div class="flex gap-2">
@@ -691,7 +699,7 @@ function handleChannelChange(channel, i) {
 										The max amount of documents (here jobs) per commit. To optimize indexing
 										throughput, it is best to keep this as high as possible. However, especially
 										when reindexing the whole instance, it can be useful to have a limit on how many
-										jobs can be written without being commited. A commit will make the jobs
+										jobs can be written without being committed. A commit will make the jobs
 										available for search, constitute a "checkpoint" state in the indexing and will
 										be logged.
 									</Tooltip>
@@ -750,7 +758,7 @@ function handleChannelChange(channel, i) {
 										representing all logs during 1 minute for a specific host. To optimize indexing
 										throughput, it is best to keep this as high as possible. However, especially
 										when reindexing the whole instance, it can be useful to have a limit on how many
-										logs can be written without being commited. A commit will make the logs
+										logs can be written without being committed. A commit will make the logs
 										available for search, appear as a log line, and be a "checkpoint" of the
 										indexing progress.
 									</Tooltip>

package/package/components/JsonEditor.svelte

@@ -1,12 +1,14 @@
-<script lang="ts">import { run } from 'svelte/legacy';
-import '@codingame/monaco-vscode-standalone-json-language-features';
+<script lang="ts">import '@codingame/monaco-vscode-standalone-json-language-features';
 import SimpleEditor from './SimpleEditor.svelte';
-import { createEventDispatcher } from 'svelte';
+import { createEventDispatcher, untrack } from 'svelte';
 import { createDispatcherIfMounted } from '../createDispatcherIfMounted';
 import Button from './common/button/Button.svelte';
+import { twMerge } from 'tailwind-merge';
+import { inputBorderClass } from './text_input/TextInput.svelte';
 let { code = $bindable(), value = $bindable(undefined), error = $bindable(), editor = $bindable(undefined), small = false, loadAsync = false, class: clazz = undefined, disabled = false, fixedOverflowWidgets = true } = $props();
 let tooBig = $derived(code && code?.length > 1000000);
 let loadTooBigAnyway = $state(false);
+let focused = $state(false);
 const dispatch = createEventDispatcher();
 const dispatchIfMounted = createDispatcherIfMounted(dispatch);
 function parseJson() {
@@ -24,8 +26,8 @@ function parseJson() {
         error = e.message;
     }
 }
-run(() => {
-    code != undefined && parseJson();
+$effect(() => {
+    code != undefined && untrack(() => parseJson());
 });
 </script>
 
@@ -38,12 +40,17 @@ run(() => {
 	</div>
 {:else}
 	<div class="flex flex-col w-full">
-		<div class="border w-full">
+		<div
+			class={twMerge(
+				'w-full rounded-md bg-surface-secondary',
+				inputBorderClass({ error: !!error, forceFocus: focused })
+			)}
+		>
 			<SimpleEditor
 				{loadAsync}
 				{small}
-				on:focus
-				on:blur
+				on:focus={() => (dispatch('focus'), (focused = true))}
+				on:blur={() => (dispatch('blur'), (focused = false))}
 				bind:this={editor}
 				on:change
 				autoHeight
@@ -52,10 +59,12 @@ run(() => {
 				class={clazz}
 				{disabled}
 				{fixedOverflowWidgets}
+				renderLineHighlight="none"
+				yPadding={8}
 			/>
 		</div>
 		{#if error != ''}
-			<span class="text-red-600 text-xs">{error}</span>
+			<span class="text-red-600 text-xs mt-1">{error}</span>
 		{/if}
 	</div>
 {/if}

package/package/components/JsonEditor.svelte.d.ts

@@ -25,9 +25,9 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     z_$$bindings?: Bindings;
 }
 declare const JsonEditor: $$__sveltets_2_IsomorphicComponent<Props, {
+    change: CustomEvent<any>;
     focus: CustomEvent<any>;
     blur: CustomEvent<any>;
-    change: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "value" | "error" | "code" | "editor">;

package/package/components/JsonInputs.svelte

@@ -41,7 +41,7 @@ function handleKeydown(event) {
 <!-- Add a hidden button that can receive focus -->
 <button bind:this={focusTrap} class="sr-only" tabindex="-1" aria-hidden="true">Focus trap</button>
 
-<div class="h-full">
+<div class="h-full py-3 rounded-md border">
 	<SimpleEditor
 		bind:this={simpleEditor}
 		on:focus={() => {

package/package/components/ModulePreviewForm.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">import { allTrue } from '../utils';
+<script lang="ts">import ResizeTransitionWrapper from './common/ResizeTransitionWrapper.svelte';
+import { allTrue } from '../utils';
 import { RefreshCw } from 'lucide-svelte';
 import ArgInput from './ArgInput.svelte';
 import { Button } from './common';
@@ -69,12 +70,14 @@ $effect.pre(() => {
 		{#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
@@ -104,22 +107,23 @@ $effect.pre(() => {
 								nullable={schema.properties[argName].nullable}
 								title={schema.properties[argName].title}
 								placeholder={schema.properties[argName].placeholder}
-							/>
+							>
+								{#snippet fieldHeaderActions()}
+									{#if stepsInputArgs?.isArgManuallySet(mod.id, argName)}
+										<Button
+											on:click={() => {
+												plugIt(argName)
+											}}
+											size="xs2"
+											variant="contained"
+											color="light"
+											title="Re-evaluate input step"><RefreshCw size={12} /></Button
+										>
+									{/if}
+								{/snippet}
+							</ArgInput>
 						{/if}
-						{#if stepsInputArgs?.isArgManuallySet(mod.id, argName)}
-							<div class="pt-6 mt-0.5">
-								<Button
-									on:click={() => {
-										plugIt(argName)
-									}}
-									size="sm"
-									variant="border"
-									color="light"
-									title="Re-evaluate input step"><RefreshCw size={14} /></Button
-								>
-							</div>
-						{/if}
-					</div>
+					</ResizeTransitionWrapper>
 				{/if}
 			{/each}
 		{/if}

package/package/components/NumberTypeNarrowing.svelte

@@ -2,6 +2,8 @@
 import Toggle from './Toggle.svelte';
 import Tooltip from './Tooltip.svelte';
 import { selectOptions } from './apps/editor/component';
+import Select from './select/Select.svelte';
+import TextInput from './text_input/TextInput.svelte';
 let { min = $bindable(), max = $bindable(), currency = $bindable(), currencyLocale = $bindable() } = $props();
 let minChecked = $state(min != undefined);
 let maxChecked = $state(max != undefined);
@@ -29,7 +31,11 @@ let maxChecked = $state(max != undefined);
 					options={{ right: 'Enabled' }}
 					size="xs"
 				/>
-			{/snippet} <input type="number" bind:value={min} disabled={!minChecked} />
+			{/snippet}
+			<TextInput
+				inputProps={{ type: 'number', disabled: !minChecked }}
+				bind:value={() => min?.toString(), (v) => (min = v ? parseInt(v) : undefined)}
+			/>
 		</Label>
 
 		<Label label="Max" class="w-full col-span-1 ">
@@ -53,31 +59,41 @@ let maxChecked = $state(max != undefined);
 					size="xs"
 				/>
 			{/snippet}
-			<input type="number" bind:value={max} disabled={!maxChecked} />
+			<TextInput
+				inputProps={{ type: 'number', disabled: !maxChecked }}
+				bind:value={() => max?.toString(), (v) => (max = v ? parseInt(v) : undefined)}
+			/>
 		</Label>
 	</div>
-	<div class="grid grid-cols-3 gap-4">
-		<Label label="Currency" class="w-full col-span-2">
+	<div class="flex gap-2">
+		<Label label="Currency" class=" col-span-2">
 			{#snippet header()}
 				<Tooltip light small>
 					Select a currency to display the number in. If a currency is selected, you can also select
 					a locale to format the number according to that locale.
 				</Tooltip>
 			{/snippet}
-			<select bind:value={currency}>
-				<option value={undefined}> No currency </option>
-				{#each selectOptions.currencyOptions as c}
-					<option value={c}>{c}</option>
-				{/each}
-			</select>
+			<Select
+				bind:value={
+					() => currency,
+					(v) => {
+						currency = v
+						if (!v) currencyLocale = undefined
+					}
+				}
+				items={selectOptions.currencyOptions.map((c) => ({ label: c, value: c }))}
+				placeholder="No currency"
+				clearable
+			/>
 		</Label>
 		<Label label="Currency locale" class="w-full">
-			<select bind:value={currencyLocale} disabled={!currency}>
-				<option value={undefined}> No locale </option>
-				{#each selectOptions.localeOptions as c}
-					<option value={c}>{c}</option>
-				{/each}
-			</select>
+			<Select
+				bind:value={currencyLocale}
+				items={selectOptions.localeOptions.map((c) => ({ label: c, value: c }))}
+				placeholder="No locale"
+				disabled={!currency}
+				clearable
+			/>
 		</Label>
 	</div>
 </div>

package/package/components/ObjectStoreConfigSettings.svelte

@@ -229,28 +229,36 @@ async function testConnection() {
 				<label class="block pb-2">
 					<span class="text-primary font-semibold text-sm">Service Account Key</span>
 					<span class="text-tertiary text-2xs">JSON content of the service account key file</span>
-					<SimpleEditor
-						lang="json"
-						bind:code={
-							() => {
-								if (bucket_config?.type === 'Gcs') {
-									return JSON.stringify(bucket_config.serviceAccountKey)
-								} else {
-									return '{}'
-								}
-							},
-							(v) => {
-								if (bucket_config?.type === 'Gcs') {
-									try {
-										bucket_config.serviceAccountKey = JSON.parse(v ?? '{}')
-									} catch (_) {
-										bucket_config.serviceAccountKey = {}
+					<!-- svelte-ignore a11y_click_events_have_key_events -->
+					<!-- svelte-ignore a11y_no_static_element_interactions -->
+					<div
+						onclick={(ev) => {
+							ev.stopPropagation() // this is to prevent wrapping label interference
+						}}
+					>
+						<SimpleEditor
+							lang="json"
+							bind:code={
+								() => {
+									if (bucket_config?.type === 'Gcs') {
+										return JSON.stringify(bucket_config.serviceAccountKey)
+									} else {
+										return '{}'
+									}
+								},
+								(v) => {
+									if (bucket_config?.type === 'Gcs') {
+										try {
+											bucket_config.serviceAccountKey = JSON.parse(v ?? '{}')
+										} catch (_) {
+											bucket_config.serviceAccountKey = {}
+										}
 									}
 								}
 							}
-						}
-						class="h-80"
-					/>
+							class="h-80"
+						/>
+					</div>
 				</label>
 			{:else}
 				<div>Unknown bucket type {bucket_config['type']}</div>

package/package/components/Path.svelte

@@ -344,10 +344,7 @@ let pathUsageInScriptsPromise = $derived(kind == 'script' &&
 							<ToggleButton
 								icon={User}
 								disabled={disabled || disableEditing}
-								light
-								size="xs"
 								value="user"
-								position="left"
 								label="User"
 								{item}
 							/>
@@ -355,10 +352,7 @@ let pathUsageInScriptsPromise = $derived(kind == 'script' &&
 							<ToggleButton
 								icon={Folder}
 								disabled={disabled || disableEditing}
-								light
-								size="xs"
 								value="folder"
-								position="right"
 								label="Folder"
 								{item}
 							/>
@@ -367,7 +361,7 @@ let pathUsageInScriptsPromise = $derived(kind == 'script' &&
 				</div>
 			{/if}
 			{#if !hideUser}
-				<div class="text-xl">/</div>
+				<div class="text-xl text-tertiary">/</div>
 			{/if}
 			<div>
 				{#if meta.ownerKind === 'user'}
@@ -389,7 +383,7 @@ let pathUsageInScriptsPromise = $derived(kind == 'script' &&
 					</label>
 				{/if}
 			</div>
-			<span class="text-xl">/</span>
+			<span class="text-xl text-tertiary">/</span>
 			<label class="block grow w-full max-w-md">
 				<!-- svelte-ignore a11y_autofocus -->
 				<input

package/package/components/Path.svelte.d.ts

@@ -34,6 +34,6 @@ declare const Path: $$__sveltets_2_IsomorphicComponent<Props, {
     focus: () => void;
     setName: (x: string) => void;
     reset: () => Promise<void>;
-}, "error" | "path" | "disabled" | "dirty">;
+}, "path" | "disabled" | "error" | "dirty">;
 type Path = InstanceType<typeof Path>;
 export default Path;

package/package/components/ResourceEditor.svelte

@@ -258,10 +258,9 @@ run(() => {
 					<h5 class="mt-4 inline-flex items-center gap-4 pb-2">
 						File content ({resourceTypeInfo.format_extension})
 					</h5>
-					<div class="h-full w-full border p-1 rounded">
+					<div class="">
 						<SimpleEditor
 							autoHeight
-							class="editor"
 							lang={resourceTypeInfo.format_extension}
 							bind:code={textFileContent}
 							fixedOverflowWidgets={false}
@@ -291,14 +290,8 @@ run(() => {
 				{#if !emptyString(jsonError)}<span class="text-red-400 text-xs mb-1 flex flex-row-reverse"
 						>{jsonError}</span
 					>{:else}<div class="py-2"></div>{/if}
-				<div class="h-full w-full border p-1 rounded">
-					<SimpleEditor
-						autoHeight
-						class="editor"
-						lang="json"
-						bind:code={rawCode}
-						fixedOverflowWidgets={false}
-					/>
+				<div class="bg-surface-secondary rounded-md border py-2.5">
+					<SimpleEditor autoHeight lang="json" bind:code={rawCode} />
 				</div>
 			{/if}
 		</div>

package/package/components/ResourcePicker.svelte

@@ -4,12 +4,14 @@ import { onMount, untrack } from 'svelte';
 import AppConnect from './AppConnectDrawer.svelte';
 import ResourceEditorDrawer from './ResourceEditorDrawer.svelte';
 import { Button } from './common';
-import { Pen, Plus, RotateCw } from 'lucide-svelte';
+import { Loader2, Pen, Plus, RotateCw } from 'lucide-svelte';
 import { sendUserToast } from '../toast';
 import Select from './select/Select.svelte';
 import DbManagerDrawer from './DBManagerDrawer.svelte';
 import ExploreAssetButton, { assetCanBeExplored } from './ExploreAssetButton.svelte';
-let { initialValue = $bindable(undefined), value = $bindable(undefined), valueType = $bindable(undefined), resourceType = undefined, disabled = false, disablePortal = false, showSchemaExplorer = false, selectFirst = false, expressOAuthSetup = false, defaultValues = undefined, placeholder = undefined, onClear = undefined, excludedValues = undefined } = $props();
+import { twMerge } from 'tailwind-merge';
+import DropdownV2 from './DropdownV2.svelte';
+let { initialValue = $bindable(undefined), value = $bindable(undefined), valueType = $bindable(undefined), resourceType = undefined, disabled = false, disablePortal = false, showSchemaExplorer = false, selectFirst = false, expressOAuthSetup = false, defaultValues = undefined, placeholder = undefined, selectInputClass = '', class: className = '', onClear = undefined, excludedValues = undefined } = $props();
 if (initialValue && value == undefined) {
     console.log('initialValue', initialValue);
     value = initialValue;
@@ -128,91 +130,102 @@ let dbManagerDrawer = $state();
 	}}
 />
 <!-- {JSON.stringify({ value, collection })} -->
-<div class="flex flex-col w-full items-start min-h-9">
+<div class="flex flex-col w-full items-start min-h-10 {className}">
 	<div class="flex flex-row w-full items-center">
-		{#if collection?.length > 0}
-			<Select
-				{disabled}
-				{disablePortal}
-				bind:value={
-					() => value,
-					(v) => {
-						value = v
-						valueType = collection.find((x) => x?.value == v)?.type
-					}
+		<Select
+			{disabled}
+			{disablePortal}
+			bind:value={
+				() => value,
+				(v) => {
+					value = v
+					valueType = collection.find((x) => x?.value == v)?.type
 				}
-				onClear={() => {
-					initialValue = undefined
-					value = undefined
-					valueType = undefined
-					onClear?.()
-				}}
-				items={collection}
-				clearable
-				class="text-clip grow min-w-0"
-				placeholder={placeholder ?? `${resourceType ?? 'any'} resource`}
-			/>
-		{:else if !loading}
-			<div class="text-2xs text-tertiary mr-2">0 found</div>
-		{/if}
-		{#if !loading}
-			<div class="mx-0.5"></div>
-			{#if value && value != ''}
+			}
+			onClear={() => {
+				initialValue = undefined
+				value = undefined
+				valueType = undefined
+				onClear?.()
+			}}
+			items={collection}
+			clearable
+			class="text-clip grow min-w-0"
+			inputClass={twMerge('min-h-10', selectInputClass)}
+			placeholder={placeholder ?? `${resourceType ?? 'any'} resource`}
+			itemLabelWrapperClasses="flex-1"
+			itemButtonWrapperClasses="flex"
+		>
+			{#snippet endSnippet({ item, close })}
 				<Button
 					{disabled}
 					color="light"
 					variant="contained"
-					size="sm"
-					btnClasses="w-8 px-0.5 py-1.5"
-					on:click={() => resourceEditor?.initEdit?.(value ?? '')}
+					size="xs3"
+					btnClasses="w-8 px-0.5 py-1.5 bg-transparent hover:bg-surface-secondary"
+					wrapperClasses="-mr-2 pl-1"
+					on:click={() => (resourceEditor?.initEdit?.(item.value ?? ''), close())}
 					startIcon={{ icon: Pen }}
 					iconOnly
 				/>
-			{/if}
-
-			{#if resourceType?.includes(',')}
-				{#each resourceType.split(',') as rt}
+			{/snippet}
+			{#snippet bottomSnippet({ close })}
+				<div class="flex bg-surface border-t divide-x">
+					{#if resourceType?.includes(',')}
+						<DropdownV2
+							enableFlyTransition
+							items={resourceType?.split(',').map((rt) => ({
+								displayName: `${rt} resource`,
+								icon: Plus,
+								action: () => (appConnect?.open?.(rt), close())
+							})) ?? []}
+						>
+							{#snippet buttonReplacement()}
+								<Button
+									{disabled}
+									color="light"
+									variant="contained"
+									wrapperClasses="flex-1"
+									btnClasses="rounded-none mt-0.5"
+									size="sm"
+									startIcon={{ icon: Plus }}
+								>
+									Add a resource
+								</Button>
+							{/snippet}
+						</DropdownV2>
+					{:else}
+						<Button
+							{disabled}
+							color="light"
+							variant="contained"
+							wrapperClasses="flex-1"
+							btnClasses="rounded-none"
+							size="sm"
+							on:click={() => (appConnect?.open?.(resourceType), close())}
+							startIcon={{ icon: Plus }}
+						>
+							Add a {resourceType} resource
+						</Button>
+					{/if}
 					<Button
-						{disabled}
-						color="light"
 						variant="contained"
+						color="light"
+						btnClasses="rounded-none"
 						size="sm"
-						btnClasses="w-8 px-0.5 py-1.5"
-						on:click={() => appConnect?.open?.(rt)}
-						startIcon={{ icon: Plus }}>{rt}</Button
-					>
-				{/each}
-			{:else}
-				<Button
-					{disabled}
-					color="light"
-					variant="border"
-					size="sm"
-					on:click={() => appConnect?.open?.(resourceType)}
-					startIcon={{ icon: Plus }}
-					iconOnly={collection?.length > 0}
-					>{#if collection?.length == 0}
-						Add a {resourceType} resource
-					{/if}</Button
-				>
-				<div class="mx-0.5"></div>
-			{/if}
-		{/if}
-
-		<Button
-			variant="contained"
-			color="light"
-			btnClasses="w-8 px-0.5 py-1.5"
-			size="sm"
-			on:click={() => {
-				loadResources(resourceType)
-			}}
-			startIcon={{ icon: RotateCw }}
-			iconOnly
-		/>
+						on:click={() => {
+							loadResources(resourceType)
+						}}
+						startIcon={loading ? { icon: Loader2, classes: 'animate-spin' } : { icon: RotateCw }}
+						iconOnly
+					/>
+				</div>
+			{/snippet}
+		</Select>
 	</div>
 	{#if showSchemaExplorer && value && assetCanBeExplored({ kind: 'resource', path: value }, { resource_type: resourceType })}
 		<ExploreAssetButton
+			class="mt-1"
 			_resourceMetadata={{ resource_type: resourceType }}
 			asset={{ kind: 'resource', path: value }}
 			{dbManagerDrawer}

package/package/components/ResourcePicker.svelte.d.ts

@@ -10,6 +10,8 @@ interface Props {
     expressOAuthSetup?: boolean;
     defaultValues?: Record<string, any> | undefined;
     placeholder?: string | undefined;
+    selectInputClass?: string;
+    class?: string;
     onClear?: () => void;
     excludedValues?: string[];
 }

package/package/components/RunChart.svelte

@@ -217,7 +217,7 @@ let scatterOptions = $derived({
 <!-- {JSON.stringify(jobs?.map((x) => x.started_at))} -->
 <div class="relative max-h-40">
 	{#if !lastFetchWentToEnd}
-		<div class="absolute top-[-26px] left-[160px]"
+		<div class="absolute top-[-28px] left-[180px]"
 			><Button size="xs" color="transparent" variant="contained" on:click={() => onLoadExtra()}
 				>Load more <Tooltip2
 					>There are more jobs to load but only the first 1000 were fetched</Tooltip2