Change:
box-sizing: border-box; } <ins> .settings-editor > .settings-body > .monaco-split-view2 { margin-top: 14px; } </ins> .settings-editor.no-results > .settings-body .settings-toc-container, .settings-editor.no-results > .settings-body .settings-tree-container { display: none;

Discussion:
Can we add some additional padding to the top of the TOC, to match the container on the right? !
Good idea. Assigning to March, though, because when I padding earlier, the end of the list got cut off, and I couldn't find a quick workaround.
This one's tough. A few attempts: Increasing the padding and doing nothing else results in the last entry being cut off. Increasing the padding and manually making the lists render at different heights results in the last entry showing, but the scrollbar not touching the bottom when the user scrolls to the bottom of the list. Creating a new element to stick above the scrollable list results in the shadow being pushed down. We want to keep the shadow at the top edge of the container. Adding a fake settings group with no settings to try and get the list to add a spacer element does nothing, because a settings group needs settings to show up in the ToC.
how did we get the padding to work before? Maybe we can ask the list widget to provide a padding param to adjust the height?
Before, we weren't using a splitview. The shadow was lower, and there was no sash. If we add padding elements above the splitview views right now, we will have the sash and the shadow intersect again in a + shape rather than a T shape.
Do you want the padding inside the list view, or outside of it? If you want it inside the listview, you can add it to an element and include this in the size returned from . If you just put css padding inside the list by itself, that will mess the list up
I would like the padding to be inside the listview. Adding the padding to the element results in a different focus border shape for that element.
What if you use a margin-top on the first element instead of padding?
I believe in this case, either the whole list gets pushed down and truncated at the end, or if I adjust the list height manually, the scrollbar fails to scroll all the way to the end when the list is also at the end. I also reopened an older version of Code and noticed that the list itself didn't actually have padding. There was padding above it, and the shadow was lower, as a result. !

I wouldn't mind it if the list had that top margin, I still think the line connecting to the user/workspace heading gives the impression that the top is also resizable (like editor grids) so staying away from that as much as possible would be preferred: <img width="855" alt="CleanShot 2022-03-14 at 14 03 38 src="https://user-"<img width="851" alt="CleanShot 2022-03-14 at 14 02 34 src="https://user-"
Verification steps: Settings editor should look closer to In other words, there should be a gap between the vertical splitview sash and the horizontal tabs/scope widget underline. one scrolls down on either side, horizontal shadows should appear below the horizontal underline.
Verified at described, not sure it looks better now than before though because the shadow no longer aligns with the horizontal bar above.