From e9e445fddf3b9d98d324e649cb7840d21a0fcfa6 Mon Sep 17 00:00:00 2001 From: m Date: Mon, 4 May 2026 18:08:06 +0200 Subject: [PATCH] =?UTF-8?q?fix(t-paliad-118):=20/admin/email-templates=20V?= =?UTF-8?q?erf=C3=BCgbare=20Variablen=20=E2=80=94=20single-column=20stack?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The `.admin-et-variables-list` was a 4-track CSS grid designed for flat name/type/desc/sample siblings. The renderer wraps each variable in a `.admin-et-variable-row` div, so each variable became a single grid item — and 4 rows packed into one visual row, producing the wide multi-column overflow. Switch the outer container to `flex-direction: column` (one variable per row) and the row to a baseline-aligned wrapping flex (name, type pill, desc, sample left-to-right). `margin-left: auto` pushes the sample right when there's room and lets it wrap below on narrow widths. Pre-existing dark-mode issue (`.admin-et-variable-name` hardcoded to #1c1917, unreadable on dark background) is unchanged by this fix and predates the layout regression — flagged separately, not in scope here. --- frontend/src/styles/global.css | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css index 9807287..b32a35d 100644 --- a/frontend/src/styles/global.css +++ b/frontend/src/styles/global.css @@ -8233,13 +8233,20 @@ dialog.quick-add-sheet::backdrop { } .admin-et-variables-list { - display: grid; - grid-template-columns: max-content max-content 1fr max-content; - gap: 0.4rem 0.75rem; + display: flex; + flex-direction: column; + gap: 0.4rem; margin-top: 0.75rem; font-size: 0.85rem; } +.admin-et-variable-row { + display: flex; + align-items: baseline; + flex-wrap: wrap; + gap: 0.5rem; +} + .admin-et-variable-name { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; color: #1c1917; @@ -8260,6 +8267,7 @@ dialog.quick-add-sheet::backdrop { .admin-et-variable-sample { color: var(--color-text-muted); font-style: italic; + margin-left: auto; text-align: right; }