From 4619a91f45a4e716db830f1d60d66f4457e4a531 Mon Sep 17 00:00:00 2001 From: mwiegand Date: Fri, 8 May 2026 20:44:41 +0200 Subject: [PATCH] =?UTF-8?q?fix(l4d2-web):=20file=20tree=20layout=20?= =?UTF-8?q?=E2=80=94=20wrap=20children=20to=20next=20line,=20align=20names?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Two CSS fixes that together turn the rendered file tree from 'everything on one line' into an actual tree: - .file-tree-children: flex-basis: 100% so an expanded folder's children wrap to the next line of the parent
  • flex container instead of flowing inline next to the toggle button. - .file-tree-row-file: padding-left = chevron width, so file rows align visually with sibling folder names (folder names are offset by their chevron; files have no chevron, so without padding they'd start at the chevron column instead of the name column). Chevron itself pinned to width: 1ch so rotated/un-rotated states have identical layout. --- l4d2web/static/css/components.css | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/l4d2web/static/css/components.css b/l4d2web/static/css/components.css index bf9bf93..badfbf3 100644 --- a/l4d2web/static/css/components.css +++ b/l4d2web/static/css/components.css @@ -223,14 +223,24 @@ dialog.modal::backdrop { .file-tree-toggle .chevron { display: inline-block; + width: 1ch; + text-align: center; transition: transform 120ms ease; margin-right: var(--space-xs); } +.file-tree-row-file { + padding-left: calc(1ch + var(--space-xs)); +} + .file-tree-toggle[aria-expanded="true"] .chevron { transform: rotate(90deg); } +.file-tree-children { + flex-basis: 100%; +} + .file-tree-children[hidden] { display: none; }