Fix modal rendering + logout SVG icon
Some checks failed
Validate / Hassfest (push) Has been cancelled

- 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>
This commit is contained in:
2026-03-19 17:34:36 +03:00
parent 7b7ef5fec1
commit ca6a9c8830
2 changed files with 39 additions and 31 deletions

View File

@@ -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>