From 17fefcf777063849ca8ec1e097bf02e826c0b3a7 Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Wed, 14 Oct 2026 14:15:08 +0200
Subject: [PATCH] fix: unify cron builder control sizes and widths (#11764)

Co-authored-by: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Co-authored-by: Ruben Fiszel <ruben@windmill.dev>
---
 .../src/lib/components/CronBuilder.svelte     |   2 +-
 frontend/src/lib/components/CronInput.svelte  | 108 +++++++++---------
 .../src/lib/components/copilot/CronGen.svelte |   3 +-
 3 files changed, 55 insertions(+), 58 deletions(-)

diff --git a/frontend/src/lib/components/CronBuilder.svelte b/frontend/src/lib/components/CronBuilder.svelte
index 3bceabb417..81f1f4490f 100644
--- a/frontend/src/lib/components/CronBuilder.svelte
+++ b/frontend/src/lib/components/CronBuilder.svelte
@@ -15,7 +15,7 @@
 	contentClasses="p-4"
 >
 	{#snippet trigger()}
-		<Button variant="default" unifiedSize="sm" nonCaptureEvent={true} startIcon={{ icon: Clock }}>
+		<Button variant="default" unifiedSize="md" nonCaptureEvent={true} startIcon={{ icon: Clock }}>
 			Cron builder
 		</Button>
 	{/snippet}
diff --git a/frontend/src/lib/components/CronInput.svelte b/frontend/src/lib/components/CronInput.svelte
index d2b629d33e..ae06974c66 100644
--- a/frontend/src/lib/components/CronInput.svelte
+++ b/frontend/src/lib/components/CronInput.svelte
@@ -278,39 +278,46 @@
 				<div class="w-full flex flex-col gap-1">
 					<div class="text-emphasis font-semibold text-xs leading-none">Execute schedule every</div>
 
-					<div class="w-full flex gap-4">
-						<div class="w-full flex flex-col gap-1 mb-2">
-							<select {disabled} name="execute_every" id="execute_every" bind:value={executeEvery}>
-								<option value="second">Second(s)</option>
-								<option value="minute">Minute(s)</option>
-								<option value="hour">Hour(s)</option>
-								<option value="day-month">Day of the month</option>
-								<option value="month">Month(s)</option>
-								<option value="day-week">Day of the week</option>
-							</select>
-						</div>
+					<div class="w-full flex gap-4 items-start">
+						<Select
+							class="flex-1 min-w-0"
+							disablePortal
+							{disabled}
+							id="execute_every"
+							bind:value={executeEvery}
+							items={[
+								{ value: 'second', label: 'Second(s)' },
+								{ value: 'minute', label: 'Minute(s)' },
+								{ value: 'hour', label: 'Hour(s)' },
+								{ value: 'day-month', label: 'Day of the month' },
+								{ value: 'month', label: 'Month(s)' },
+								{ value: 'day-week', label: 'Day of the week' }
+							]}
+						/>
 
-						<div class="w-full flex flex-col gap-1 justify-center">
-							{#if executeEvery == 'second'}
-								<input {disabled} type="number" min="0" max="59" bind:value={seconds} />
-								<small class="text-secondary text-2xs">Valid range 0-59</small>
-							{:else if executeEvery == 'minute'}
-								<input {disabled} type="number" min="0" max="59" bind:value={minutes} />
-								<small class="text-secondary text-2xs">Valid range 0-59</small>
-							{:else if executeEvery == 'hour'}
-								<input {disabled} type="number" min="0" max="23" bind:value={hours} />
-								<small class="text-secondary text-2xs">Valid range 0-23</small>
-							{:else if executeEvery == 'day-month'}
-								<!-- <div class="w-full flex">
-						<label for="lastDayOfMonth" class="w-full flex items-center gap-2">
-							<div class="flex">
-								<input type="checkbox" id="lastDayOfMonth" bind:checked={lastDayOfMonth} />
+						{#if executeEvery == 'second' || executeEvery == 'minute' || executeEvery == 'hour'}
+							<div class="flex-1 min-w-0 flex flex-col gap-1">
+								{#if executeEvery == 'second'}
+									<TextInput
+										inputProps={{ type: 'number', min: 0, max: 59, disabled }}
+										bind:value={seconds}
+									/>
+									<small class="text-secondary text-2xs">Valid range 0-59</small>
+								{:else if executeEvery == 'minute'}
+									<TextInput
+										inputProps={{ type: 'number', min: 0, max: 59, disabled }}
+										bind:value={minutes}
+									/>
+									<small class="text-secondary text-2xs">Valid range 0-59</small>
+								{:else}
+									<TextInput
+										inputProps={{ type: 'number', min: 0, max: 23, disabled }}
+										bind:value={hours}
+									/>
+									<small class="text-secondary text-2xs">Valid range 0-23</small>
+								{/if}
 							</div>
-							<small> Last day of the month </small>
-						</label>
-					</div> -->
-							{/if}
-						</div>
+						{/if}
 					</div>
 				</div>
 
@@ -319,6 +326,7 @@
 						<MultiSelect
 							disablePortal
 							{disabled}
+							class="w-full"
 							bind:value={monthsOfYear}
 							items={safeSelectItems(monthsOfYearOptions)}
 							placeholder="Every month"
@@ -331,6 +339,7 @@
 						<MultiSelect
 							disablePortal
 							{disabled}
+							class="w-full"
 							bind:value={daysOfWeek}
 							items={safeSelectItems(daysOfWeekOptions)}
 							placeholder="Every day"
@@ -343,28 +352,14 @@
 						{#if executeEvery == 'month'}
 							<small class="text-secondary text-2xs font-normal">On day of the month</small>
 						{/if}
-						<div class="w-full flex gap-4">
-							<div class="w-full flex">
-								<MultiSelect
-									disablePortal
-									{disabled}
-									bind:value={daysOfMonth}
-									items={safeSelectItems(daysOfMonthOptions)}
-									placeholder="Every day"
-								/>
-							</div>
-
-							<!-- {#if executeEvery == 'month'}
-						<div class="w-full flex">
-							<label for="lastDayOfMonth" class="w-full flex items-center gap-2">
-								<div class="flex">
-									<input type="checkbox" id="lastDayOfMonth" bind:checked={lastDayOfMonth} />
-								</div>
-								<small> Last day of the month </small>
-							</label>
-						</div>
-					{/if} -->
-						</div>
+						<MultiSelect
+							class="w-full"
+							disablePortal
+							{disabled}
+							bind:value={daysOfMonth}
+							items={safeSelectItems(daysOfMonthOptions)}
+							placeholder="Every day"
+						/>
 						<small class="text-secondary text-2xs font-normal"
 							>Schedule will only execute on valid calendar days</small
 						>
@@ -374,7 +369,10 @@
 				{#if executeEvery == 'day-month' || executeEvery == 'month' || executeEvery == 'day-week'}
 					<div class="w-full flex flex-col gap-1">
 						<small class="font-semibold text-emphasis text-xs">At time</small>
-						<input {disabled} type="time" name="atUTCTime" id="atUTCTime" bind:value={UTCTime} />
+						<TextInput
+							inputProps={{ type: 'time', name: 'atUTCTime', id: 'atUTCTime', disabled }}
+							bind:value={UTCTime}
+						/>
 					</div>
 				{/if}
 
@@ -390,7 +388,7 @@
 			<div class="mt-8">
 				<Button
 					variant="accent"
-					size="xs"
+					unifiedSize="md"
 					on:click={() => {
 						schedule = nschedule
 						close()
diff --git a/frontend/src/lib/components/copilot/CronGen.svelte b/frontend/src/lib/components/copilot/CronGen.svelte
index fb5806234c..5e54136f07 100644
--- a/frontend/src/lib/components/copilot/CronGen.svelte
+++ b/frontend/src/lib/components/copilot/CronGen.svelte
@@ -82,8 +82,7 @@
 	<Popover floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}>
 		{#snippet trigger()}
 			<Button
-				color={genLoading ? 'red' : 'light'}
-				size="xs"
+				unifiedSize="md"
 				nonCaptureEvent={!genLoading}
 				startIcon={{ icon: Wand2 }}
 				iconOnly