diff --git a/assets/style.css b/assets/style.css index f19b6ee..f1a7338 100644 --- a/assets/style.css +++ b/assets/style.css @@ -27,6 +27,9 @@ --border: 1px solid var(--secondary); --border-dashed: 1px dashed var(--secondary); + /* Subtle vertical rail for tree-nesting depth — quieter than --border so + it reads as a guide, not a divider. */ + --border-guide: 1px solid var(--bg-panel-hover); --space-1: 0.25rem; --space-2: 0.5rem; @@ -593,14 +596,16 @@ aside.sidebar:empty { display: none; } } /* === Tree picker === */ -.tree-picker { max-height: 60vh; overflow-y: auto; } +/* Rows are click targets (navigate / toggle), not prose — suppress the + text-selection highlight that double/drag clicks would otherwise leave, + matching the persistent .tree-sidebar rail. */ +.tree-picker { max-height: 60vh; overflow-y: auto; user-select: none; } .tree-row { display: flex; align-items: center; - gap: var(--space-2); - padding: 0.4rem var(--space-2); + gap: var(--space-1); + padding: 0.25rem var(--space-1); cursor: pointer; - min-height: 2rem; } .tree-row:hover, .tree-row.is-selected { background: var(--bg-panel-hover); } .tree-row.is-selected { @@ -613,7 +618,13 @@ aside.sidebar:empty { display: none; } .tree-chevron { width: 1.25rem; color: var(--secondary); } .tree-chevron.is-leaf { visibility: hidden; } .tree-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } -.tree-children { padding-left: var(--space-2); } +/* Each nesting level gets a vertical guide rail down its left edge so depth + stays scannable in the compact view (cf. VS Code / file-explorer trees). */ +.tree-children { + margin-left: var(--space-2); + padding-left: var(--space-2); + border-left: var(--border-guide); +} .tree-selected-path { font-size: var(--font-sm); padding: var(--space-1) 0;