From 7b31390b4cc4c69a0e3ab1327219f48f172f2c19 Mon Sep 17 00:00:00 2001 From: mwiegand Date: Fri, 8 May 2026 20:49:05 +0200 Subject: [PATCH] =?UTF-8?q?fix(l4d2-web):=20file=20tree=20=E2=80=94=20unif?= =?UTF-8?q?orm=20vertical=20spacing=20across=20all=20rows?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The flex 'gap' shorthand on .file-tree-row was setting row-gap as well as column-gap, so when the .file-tree-children div wrapped to a new line the row-gap (--space-s) added on top of the nested ul's margin-top (--space-xs) — making the button-to-first-child gap visibly bigger than the sibling-row gap. Switch to 'gap: 0 var(--space-s)' so only column-gap applies; vertical rhythm is now owned exclusively by the outer grid gap (--space-xs) and the nested ul margin-top (--space-xs), both equal. Co-Authored-By: Claude Opus 4.7 (1M context) --- l4d2web/static/css/components.css | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/l4d2web/static/css/components.css b/l4d2web/static/css/components.css index badfbf3..32e1d0c 100644 --- a/l4d2web/static/css/components.css +++ b/l4d2web/static/css/components.css @@ -206,7 +206,10 @@ dialog.modal::backdrop { .file-tree-row { display: flex; - gap: var(--space-s); + /* Row-gap 0 so the wrapped .file-tree-children div sits directly under + the toggle button; vertical spacing is owned exclusively by the + outer grid's gap and the nested ul's margin-top. */ + gap: 0 var(--space-s); align-items: baseline; flex-wrap: wrap; }