VS Code Web: bigger file-tree indents
Increases indentation and adds guide lines in the Explorer tree so the hierarchy is clearer (works on github.dev too).
Code to copy
/* Bigger indentation in the Explorer file tree for better hierarchy (works on github.dev too) */
.monaco-workbench [id*="workbench.view.explorer"] .monaco-tl-twistie {
margin-left: 4px !important;
}
.monaco-workbench [id*="workbench.view.explorer"] .monaco-list-row {
--vscode-tree-indent: 16px;
}
.monaco-workbench [id*="workbench.view.explorer"] .monaco-tl-indent {
border-left: 1px dashed rgba(127,127,127,0.3) !important;
}How to use this example
- Copy the code with the button above.
- Install JustZix (2 minutes) and open the extension on the target page.
- Add a new rule matching that page.
- Paste the code into the rule's CSS panel and save — the effect appears instantly.
Rate this example
No ratings yet — be the first.