From ca6a9c88302e84d63b9a7c8d17c7417b0310afb2 Mon Sep 17 00:00:00 2001
From: "alexei.dolgolyov" <dolgolyov.alexei@gmail.com>
Date: Thu, 19 Mar 2026 17:34:36 +0300
Subject: [PATCH] Fix modal rendering + logout SVG icon

- Modal: use inline styles instead of Tailwind classes for position:fixed
  overlay (Tailwind v4 classes weren't applying correctly inside flex)
- Move password modal outside the flex container to top level
- Replace logout text button with SVG logout icon (16x16, Lucide style)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/src/lib/components/Modal.svelte | 21 ++++++----
 frontend/src/routes/+layout.svelte       | 49 ++++++++++++------------
 2 files changed, 39 insertions(+), 31 deletions(-)

diff --git a/frontend/src/lib/components/Modal.svelte b/frontend/src/lib/components/Modal.svelte
index c30fc70..bff498b 100644
--- a/frontend/src/lib/components/Modal.svelte
+++ b/frontend/src/lib/components/Modal.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { t } from '$lib/i18n';
 	let { open = false, title = '', onclose, children } = $props<{
 		open: boolean;
 		title?: string;
@@ -11,12 +10,20 @@
 {#if open}
 	<!-- svelte-ignore a11y_click_events_have_key_events -->
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
-	<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/40" onclick={onclose}>
-		<div class="bg-[var(--color-card)] border border-[var(--color-border)] rounded-lg shadow-lg w-full max-w-md mx-4 p-5"
-			onclick={(e) => e.stopPropagation()}>
-			<div class="flex items-center justify-between mb-4">
-				<h3 class="text-lg font-semibold">{title}</h3>
-				<button onclick={onclose} class="text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)] text-lg leading-none">&times;</button>
+	<div
+		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}
+	>
+		<div
+			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: 28rem; margin: 1rem; padding: 1.25rem;"
+			onclick={(e) => e.stopPropagation()}
+		>
+			<div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem;">
+				<h3 style="font-size: 1.125rem; font-weight: 600;">{title}</h3>
+				<button onclick={onclose}
+					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>
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index 0dd079a..59aae5d 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -170,8 +170,9 @@
 									<p class="text-xs text-[var(--color-muted-foreground)]">{auth.user.role}</p>
 								</div>
 								<button onclick={logout}
-									class="text-xs text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)] transition-colors">
-									{tt('nav.logout')}
+									class="text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)] transition-colors"
+									title={tt('nav.logout')}>
+									<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
 								</button>
 							</div>
 							<button onclick={() => showPasswordForm = true}
@@ -191,26 +192,26 @@
 			</div>
 		</main>
 	</div>
-
-	<!-- Password change modal -->
-	<Modal open={showPasswordForm} title={tt('common.changePassword')} onclose={() => { showPasswordForm = false; pwdMsg = ''; }}>
-		<form onsubmit={changePassword} class="space-y-3">
-			<div>
-				<label for="pwd-current" class="block text-sm font-medium mb-1">{tt('common.currentPassword')}</label>
-				<input id="pwd-current" type="password" bind:value={pwdCurrent} required
-					class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
-			</div>
-			<div>
-				<label for="pwd-new" class="block text-sm font-medium mb-1">{tt('common.newPassword')}</label>
-				<input id="pwd-new" type="password" bind:value={pwdNew} required
-					class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
-			</div>
-			{#if pwdMsg}
-				<p class="text-sm {pwdMsg.includes(tt('common.passwordChanged')) ? 'text-[var(--color-success-fg)]' : 'text-[var(--color-error-fg)]'}">{pwdMsg}</p>
-			{/if}
-			<button type="submit" class="w-full py-2 bg-[var(--color-primary)] text-[var(--color-primary-foreground)] rounded-md text-sm font-medium hover:opacity-90">
-				{tt('common.save')}
-			</button>
-		</form>
-	</Modal>
 {/if}
+
+<!-- Password change modal (outside flex container) -->
+<Modal open={showPasswordForm} title={tt('common.changePassword')} onclose={() => { showPasswordForm = false; pwdMsg = ''; }}>
+	<form onsubmit={changePassword} class="space-y-3">
+		<div>
+			<label for="pwd-current" class="block text-sm font-medium mb-1">{tt('common.currentPassword')}</label>
+			<input id="pwd-current" type="password" bind:value={pwdCurrent} required
+				class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
+		</div>
+		<div>
+			<label for="pwd-new" class="block text-sm font-medium mb-1">{tt('common.newPassword')}</label>
+			<input id="pwd-new" type="password" bind:value={pwdNew} required
+				class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
+		</div>
+		{#if pwdMsg}
+			<p class="text-sm" style="color: var(--color-success-fg);">{pwdMsg}</p>
+		{/if}
+		<button type="submit" class="w-full py-2 bg-[var(--color-primary)] text-[var(--color-primary-foreground)] rounded-md text-sm font-medium hover:opacity-90">
+			{tt('common.save')}
+		</button>
+	</form>
+</Modal>