cronekorkn/left4me
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(l4d2-web): file tree layout — wrap children to next line, align names

Browse source 
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 <li> 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.
This commit is contained in:
mwiegand 2026-05-08 20:44:41 +02:00
parent caa8b83cf0
commit 4619a91f45
No known key found for this signature in database
1 changed files with 10 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
l4d2web/static/css/components.css
View file

@ -223,14 +223,24 @@ dialog.modal::backdrop {
.file-tree-toggle .chevron { .file-tree-toggle .chevron {
display: inline-block; display: inline-block;
width: 1ch;
text-align: center;
transition: transform 120ms ease; transition: transform 120ms ease;
margin-right: var(--space-xs); margin-right: var(--space-xs);
} }
.file-tree-row-file {
padding-left: calc(1ch + var(--space-xs));
}
.file-tree-toggle[aria-expanded="true"] .chevron { .file-tree-toggle[aria-expanded="true"] .chevron {
transform: rotate(90deg); transform: rotate(90deg);
} }
.file-tree-children {
flex-basis: 100%;
}
.file-tree-children[hidden] { .file-tree-children[hidden] {
display: none; display: none;
} }