tbh/breadcrumb-the-shire
1
0
Fork 0
forked from fa/breadcrumb-the-shire
Code Pull Requests Activity

fix(ui): prevent dialog close button from shifting down on long titles

Browse Source 
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>
This commit is contained in:
Felix Schneider
2026-04-06 22:22:08 +02:00
parent a3d05baffa
commit 1582844b01
1 changed files with 15 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
web/css/components/app-dialog.css
View File

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