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>
This commit is contained in:
Ruben Fiszel
2026-07-02 07:37:53 +02:00
committed by GitHub
parent 9a24cd2bef
commit 79897950e7
+14 -12
View File
@@ -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()}