From 6076e6d8ca622141c190c8f54803755455523538 Mon Sep 17 00:00:00 2001
From: "alexei.dolgolyov" <dolgolyov.alexei@gmail.com>
Date: Thu, 19 Mar 2026 19:15:33 +0300
Subject: [PATCH] Fix Modal overlay + per-slot template preview dropdown

- Modal: revert to inline styles (Tailwind fixed class broken).
  Added max-height: 80vh with overflow-y: auto for scrollable content.
- Template configs: preview is now per message slot via dropdown
  (assets added/removed/renamed/deleted, periodic, scheduled, memory)
  instead of hardcoded to assets_added only.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/src/lib/components/Modal.svelte      | 37 ++++++-------------
 .../src/routes/template-configs/+page.svelte  | 22 +++++++++--
 2 files changed, 29 insertions(+), 30 deletions(-)

diff --git a/frontend/src/lib/components/Modal.svelte b/frontend/src/lib/components/Modal.svelte
index 7b6dc78..f6f9c42 100644
--- a/frontend/src/lib/components/Modal.svelte
+++ b/frontend/src/lib/components/Modal.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-	import { fade, fly } from 'svelte/transition';
-
 	let { open = false, title = '', onclose, children } = $props<{
 		open: boolean;
 		title?: string;
@@ -16,39 +14,26 @@
 <svelte:window onkeydown={open ? handleKeydown : undefined} />
 
 {#if open}
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div
-		role="presentation"
-		class="fixed inset-0 z-[9999] flex items-center justify-center"
-		transition:fade={{ duration: 150 }}
+		style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.5);"
+		onclick={onclose}
 	>
-		<!-- Backdrop -->
 		<div
-			class="absolute inset-0 bg-black/50"
-			onclick={onclose}
-			role="presentation"
-		></div>
-
-		<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-		<!-- Panel -->
-		<div
-			role="dialog"
-			aria-modal="true"
-			aria-label={title}
-			tabindex="-1"
-			class="relative bg-[var(--color-card)] border border-[var(--color-border)] rounded-lg shadow-xl w-full max-w-md mx-4 p-5"
+			style="background: var(--color-card); border: 1px solid var(--color-border); border-radius: 0.5rem; box-shadow: 0 10px 25px rgba(0,0,0,0.3); width: 100%; max-width: 32rem; max-height: 80vh; margin: 1rem; display: flex; flex-direction: column;"
 			onclick={(e) => e.stopPropagation()}
-			onkeydown={(e) => { if (e.key === 'Escape') onclose(); }}
-			transition:fly={{ y: -20, duration: 200 }}
 		>
-			<div class="flex items-center justify-between mb-4">
-				<h3 class="text-lg font-semibold">{title}</h3>
+			<div style="display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.25rem 0.75rem;">
+				<h3 style="font-size: 1.125rem; font-weight: 600;">{title}</h3>
 				<button onclick={onclose}
-					class="text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)] text-xl leading-none cursor-pointer bg-transparent border-none p-1 transition-colors"
-					aria-label="Close">
+					style="color: var(--color-muted-foreground); font-size: 1.25rem; line-height: 1; cursor: pointer; background: none; border: none; padding: 0.25rem;">
 					&times;
 				</button>
 			</div>
-			{@render children()}
+			<div style="padding: 0 1.25rem 1.25rem; overflow-y: auto;">
+				{@render children()}
+			</div>
 		</div>
 	</div>
 {/if}
diff --git a/frontend/src/routes/template-configs/+page.svelte b/frontend/src/routes/template-configs/+page.svelte
index ec8f0da..6f87530 100644
--- a/frontend/src/routes/template-configs/+page.svelte
+++ b/frontend/src/routes/template-configs/+page.svelte
@@ -176,10 +176,24 @@
 							</div>
 						{/if}
 					</div>
-					<div class="flex items-center gap-3 ml-4">
-						<button onclick={() => preview(config.id, 'message_assets_added')} class="text-xs text-[var(--color-muted-foreground)] hover:underline">{t('templateConfig.preview')}</button>
-						<button onclick={() => edit(config)} class="text-xs text-[var(--color-muted-foreground)] hover:underline">{t('common.edit')}</button>
-						<button onclick={() => remove(config.id)} class="text-xs text-[var(--color-destructive)] hover:underline">{t('common.delete')}</button>
+					<div class="flex flex-col items-end gap-2 ml-4">
+						<div class="flex items-center gap-3">
+							<button onclick={() => edit(config)} class="text-xs text-[var(--color-muted-foreground)] hover:underline">{t('common.edit')}</button>
+							<button onclick={() => remove(config.id)} class="text-xs text-[var(--color-destructive)] hover:underline">{t('common.delete')}</button>
+						</div>
+						<div class="flex items-center gap-1">
+							<select onchange={(e) => preview(config.id, e.currentTarget.value)}
+								class="text-xs px-1 py-0.5 border border-[var(--color-border)] rounded bg-[var(--color-background)]">
+								<option value="" disabled selected>{t('templateConfig.preview')}...</option>
+								<option value="message_assets_added">{t('templateConfig.assetsAdded')}</option>
+								<option value="message_assets_removed">{t('templateConfig.assetsRemoved')}</option>
+								<option value="message_album_renamed">{t('templateConfig.albumRenamed')}</option>
+								<option value="message_album_deleted">{t('templateConfig.albumDeleted')}</option>
+								<option value="periodic_summary_message">{t('templateConfig.periodicSummary')}</option>
+								<option value="scheduled_assets_message">{t('templateConfig.scheduledAssets')}</option>
+								<option value="memory_mode_message">{t('templateConfig.memoryMode')}</option>
+							</select>
+						</div>
 					</div>
 				</div>
 			</Card>