From 1582844b01dda08ba8dee81e099504840d1f2e50 Mon Sep 17 00:00:00 2001
From: fs <fs@breadcrumb-solutions.de>
Date: Mon, 6 Apr 2026 22:22:08 +0200
Subject: [PATCH] fix(ui): prevent dialog close button from shifting down on
 long titles

Replace float-based header layout with flexbox (align-items: flex-start)
so the close button stays pinned top-right regardless of title length.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 web/css/components/app-dialog.css | 21 +++++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/web/css/components/app-dialog.css b/web/css/components/app-dialog.css
index e15a62b..53ca966 100644
--- a/web/css/components/app-dialog.css
+++ b/web/css/components/app-dialog.css
@@ -34,17 +34,28 @@
     margin: 0;
   }
 
-  /* ── Header: title flush, close button positioned ────────────────────── */
+  /* ── Header: flex row keeps close button pinned top-right ─────────────── */
+  dialog > article > header {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--app-spacing);
+  }
+
+  dialog > article > header > *:first-child {
+    flex: 1;
+    min-width: 0;
+    margin-bottom: 0;
+  }
+
   dialog > article > header > * {
     margin-bottom: 0;
   }
 
   dialog > article > header .close,
   dialog > article > header :is(a, button)[rel="prev"] {
+    flex-shrink: 0;
     margin: 0;
-    margin-left: var(--app-spacing);
     padding: 0;
-    float: right;
   }
 
   /* ── Close icon ──────────────────────────────────────────────────────── */
@@ -57,9 +68,7 @@
     min-height: 2rem;
     width: 2rem;
     height: 2rem;
-    margin-top: calc(var(--app-spacing) * -0.5);
-    margin-bottom: var(--app-spacing);
-    margin-left: auto;
+    margin: 0;
     border: none;
     border-radius: var(--app-border-radius);
     background-image: var(--app-icon-close);