From 86bf927d0847ed7c829c1a72449dd936c93f5709 Mon Sep 17 00:00:00 2001
From: G30 <50341825+silentoplayz@users.noreply.github.com>
Date: Sun, 26 Jul 2026 18:43:45 -0400
Subject: [PATCH] fix(ui): stack automation modal footer on mobile (#27027)

The automation create/edit modal footer laid the schedule/model dropdowns
and the Cancel/Create actions in a single justify-between row. On narrow
modals the fixed-width actions left too little room for the dropdowns,
which wrapped to two stacked lines with Cancel squeezed in the middle.

Stack the footer vertically on mobile (dropdowns row, then a right-aligned
actions row) and restore the horizontal layout at sm and up.

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/lib/components/AutomationModal.svelte | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/AutomationModal.svelte b/src/lib/components/AutomationModal.svelte
index d6dd0ab176..baa742fdea 100644
--- a/src/lib/components/AutomationModal.svelte
+++ b/src/lib/components/AutomationModal.svelte
@@ -138,14 +138,16 @@
 		</div>
 
 		<!-- Bottom toolbar -->
-		<div class="flex items-center justify-between px-4 pb-3.5 pt-1 gap-2">
-			<div class="flex items-center gap-0.5 flex-wrap flex-1 min-w-0">
+		<div
+			class="flex flex-col sm:flex-row sm:items-center sm:justify-between px-4 pb-3.5 pt-1 gap-2"
+		>
+			<div class="flex items-center gap-0.5 flex-wrap min-w-0 sm:flex-1">
 				<ScheduleDropdown bind:this={scheduleDropdown} side="top" align="start" />
 
 				<ModelDropdown bind:model_id side="top" align="start" />
 			</div>
 
-			<div class="flex items-center gap-2 shrink-0">
+			<div class="flex items-center justify-end gap-2 shrink-0">
 				<button
 					class="px-3 py-1 text-xs text-gray-500 hover:text-gray-700 dark:hover:text-gray-200 transition"
 					type="button"