Settings box can overlap setting

[bpasero]

See here:

I have zoomed in a bit to reproduce.

//cc @joaomoreno

[joaomoreno]

@bpasero Maybe steps? I can't repro on Windows.

[bpasero]

Yes it involves having the TOC visible, does not repro without. And having an editor to the side so that settings editor width is limited. I had zoomed in 3 times.

[joaomoreno]

Repro:

1. Resize the TOC sash

🐛 The list doesn't get properly laid out.

@rzhao271 This is not polish.

[joaomoreno]

This got broken by: 670039b

Especially this feels very broken. When using the SplitView, you should rely on it to propagate layout. That is, (1) your container gets layout, (2) the splitview gets layout and (3) each view gets layout; that is the right chain of layout calls. This adoption of SplitView is incorrect since you're calling layout of the views (3) right after your container gets layout (1). So, whenever the SplitView's sash moves, you're not propagating the correct layout.

So none of this code should exist here:

vscode/src/vs/workbench/contrib/preferences/browser/settingsEditor2.ts

Lines 1538 to 1546 in f326929

	const listHeight = dimension.height - (72 + 11 + 14 /* header height + editor padding */);
	const settingsTreeHeight = listHeight;
	this.settingsTreeContainer.style.height = `${settingsTreeHeight}px`;
	this.settingsTree.layout(settingsTreeHeight, dimension.width);
	const tocTreeHeight = settingsTreeHeight;
	this.tocTreeContainer.style.height = `${tocTreeHeight}px`;
	this.tocTree.layout(tocTreeHeight);

It should instead live inside each layout view implementation:

vscode/src/vs/workbench/contrib/preferences/browser/settingsEditor2.ts

Line 716 in f326929

this.tocTreeContainer.style.width = `${width}px`;

vscode/src/vs/workbench/contrib/preferences/browser/settingsEditor2.ts

Line 725 in f326929

this.settingsTreeContainer.style.width = `${width}px`;