From 79897950e7646b00d92a28a009174d91c705b251 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@windmill.dev>
Date: Thu, 2 Jul 2026 07:37:53 +0200
Subject: [PATCH] fix(frontend): stack cron field and cron builder button on
 narrow screens (#9871)

The cron schedule row placed the input next to a shrink-0 button group, so
on narrow layouts the buttons kept their width and squeezed the input to
near-zero. Make the row wrap and give the input a min width so the buttons
drop below it, keeping both visible.

Fixes WIN-2121

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 frontend/src/lib/components/CronInput.svelte | 26 +++++++++++---------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/frontend/src/lib/components/CronInput.svelte b/frontend/src/lib/components/CronInput.svelte
index b7febcdaca..d2b629d33e 100644
--- a/frontend/src/lib/components/CronInput.svelte
+++ b/frontend/src/lib/components/CronInput.svelte
@@ -204,18 +204,20 @@
 		<div class="flex flex-col gap-1">
 			<label for="cron-schedule" class="text-xs font-semibold text-emphasis">Cron</label>
 
-			<div class="flex flex-row gap-2 items-center">
-				<TextInput
-					inputProps={{
-						type: 'text',
-						id: 'cron-schedule',
-						name: 'cron-schedule',
-						placeholder: '0 0 */1 * * *',
-						disabled: disabled
-					}}
-					bind:value={schedule}
-					error={!validCRON}
-				/>
+			<div class="flex flex-row flex-wrap gap-2 items-center">
+				<div class="flex-1 min-w-[160px]">
+					<TextInput
+						inputProps={{
+							type: 'text',
+							id: 'cron-schedule',
+							name: 'cron-schedule',
+							placeholder: '0 0 */1 * * *',
+							disabled: disabled
+						}}
+						bind:value={schedule}
+						error={!validCRON}
+					/>
+				</div>
 				{#if !disabled}
 					<div class="flex flex-row gap-2 shrink-0">
 						{@render cronBuilder()}