WIP: keep actions visible when tree has horizontal scroll#294532
WIP: keep actions visible when tree has horizontal scroll#294532
Conversation
There was a problem hiding this comment.
Pull request overview
Adjusts list rendering + styling so action toolbars in custom view trees remain reachable when the tree content is wider than the viewport (horizontal scrolling), addressing #251722.
Changes:
- Compute a CSS custom property (
--list-scroll-right-offset) inListViewbased on current horizontal scroll position. - Apply CSS in the views tree to shift the
.actionscontainer back into the visible viewport when horizontal scrolling is active. - Update the stylelint “known variables” allowlist to include the new CSS variable.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| src/vs/workbench/browser/parts/views/media/views.css | Shifts tree row action toolbars into view when horizontal scrolling is enabled. |
| src/vs/base/browser/ui/list/listView.ts | Exposes current “distance to right edge” as a CSS variable on the list DOM node. |
| build/lib/stylelint/vscode-known-variables.json | Adds --list-scroll-right-offset to the allowlist (but also removes another variable). |
| .customview-tree .monaco-list.horizontal-scrolling .monaco-list-row.selected .custom-view-tree-node-item .actions { | ||
| background-color: var(--vscode-list-activeSelectionBackground); | ||
| } | ||
|
|
||
| .customview-tree .monaco-list.horizontal-scrolling .monaco-list-row.focused .custom-view-tree-node-item .actions { |
There was a problem hiding this comment.
The new .actions background colors don’t account for inactive selection / focused+selected states: .monaco-list-row.selected always forces --vscode-list-activeSelectionBackground, even when the list isn’t focused (should match --vscode-list-inactiveSelectionBackground), and .monaco-list-row.focused will override the selected background when a row is both focused and selected. Consider splitting selectors by list focus (.monaco-list:focus vs :not(:focus)) and making the focused rule exclude .selected (or adding an explicit .focused.selected rule) so the actions area matches the row background in all states.
| .customview-tree .monaco-list.horizontal-scrolling .monaco-list-row.selected .custom-view-tree-node-item .actions { | |
| background-color: var(--vscode-list-activeSelectionBackground); | |
| } | |
| .customview-tree .monaco-list.horizontal-scrolling .monaco-list-row.focused .custom-view-tree-node-item .actions { | |
| .customview-tree .monaco-list.horizontal-scrolling:focus .monaco-list-row.selected .custom-view-tree-node-item .actions { | |
| background-color: var(--vscode-list-activeSelectionBackground); | |
| } | |
| .customview-tree .monaco-list.horizontal-scrolling:not(:focus) .monaco-list-row.selected .custom-view-tree-node-item .actions { | |
| background-color: var(--vscode-list-inactiveSelectionBackground); | |
| } | |
| .customview-tree .monaco-list.horizontal-scrolling .monaco-list-row.focused:not(.selected) .custom-view-tree-node-item .actions { |
| @@ -388,7 +388,6 @@ | |||
| "--vscode-inlineChat-border", | |||
| "--vscode-inlineChat-foreground", | |||
| "--vscode-inlineChat-shadow", | |||
There was a problem hiding this comment.
--vscode-inlineChat-regionHighlight was removed from the stylelint known-variable allowlist, but it’s still referenced in src/vs/workbench/contrib/notebook/browser/media/notebookCellChat.css. This will make stylelint fail on that CSS file. Please re-add the variable here (or rename/update all remaining usages to a different known variable).
| "--vscode-inlineChat-shadow", | |
| "--vscode-inlineChat-shadow", | |
| "--vscode-inlineChat-regionHighlight", |
Fixes #251722