Wrapped tabs are broken on portrait mode in macOS

[martin-braun]

Testing #114827

The tabs stop being wrapped when opening some files or closing some tabs. The issue appears randomly. I suspect the bug triggers on specific tab widths.

Visual demonstration:

VSCode

Version: 1.53.1
Commit: 5d424b828ada08e1eb9f95d6cb41120234ef57c7
Date: 2021-02-08T23:35:15.302Z
Electron: 11.2.1
Chrome: 87.0.4280.141
Node.js: 12.18.3
V8: 8.7.220.31-electron.0
OS: Darwin x64 20.3.0

macOS v11.2.1 (20D74)
MacBook Pro (16-inch, 2019)

[bpasero]

@martin-braun can you provide me access to a repository and exact steps for how to reproduce this? We have some conditions under which wrapped tabs will stop to wrap and I wonder if we accidentally hit it here.

[martin-braun]

@bpasero It happens with any project. But I experimented a little bit and found the cause of the problem and how it can be reproduced way easier. The issue is related to a custom zoom level and pixel precision, the math gets messed up for the wrapped tabs when the window is not displayed with 100% zoom.

This is how it can be reproduced, effectively:

• Open VSCode
• Zoom out using CMD + - once (your UI gets a little smaller in VSCode)
• Hit CMD + N rapidly to create many new files
• Move your window into portrait (more height than width)
• Resize the window carefully:

[bpasero]

OK thanks I will try to reproduce, might be hard. Open for help if anyone wants to chime in and diagnose.

[bpasero]

I think this is entirely related to zooming as it only seems to reproduce with a zoom level of -1. We have a heuristic to disable wrapping tabs when we think that the last tab is large enough that the editor action toolbar is overlapped. With zooming I am seeing some rounding errors when determining this overlap. As a mitigation I pushed a change to allow for up to 1px overlap.

vscode/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts

Lines 1418 to 1423 in a6fa628

	const lastTabOverlapWithToolbarWidth = lastTab.offsetWidth + editorToolbarContainer.offsetWidth - dimensions.available.width;
	if (lastTabOverlapWithToolbarWidth > 1) {
	// Allow for slight rounding errors related to zooming here
	// https://github.com/microsoft/vscode/issues/116385
	return false;
	}

[martin-braun]

/verified