Tabs are overlaping with editor actions

[Profesor08]

Unable to acces tab, or to close last tab, because of overlaying icons.

After digging a while, I have found this code.

vscode/src/vs/workbench/browser/parts/editor/media/multieditortabscontrol.css

Lines 171 to 173 in 9d65f09

	.monaco-workbench .part.editor > .content .editor-group-container > .title > .tabs-and-actions-container.wrapping .tabs-container > .tab:last-child {
	margin-right: var(--last-tab-margin-right); /* when tabs wrap, we need a margin away from the absolute positioned editor actions */
	}

This styles are not appling because of added .tabs-bar-add-tab element. This element become last-child. If it is hidden, it remains in tree. If it is visible, it has no margin and overlaps.

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

Lines 212 to 236 in 9d65f09

	private createAddTabControl(): void {
	const tabsContainer = assertReturnsDefined(this.tabsContainer);
	const container = $('.tabs-bar-add-tab');
	tabsContainer.appendChild(container);
	this.addTabContainer = container;
	const menu = this._register(this.menuService.createMenu(MenuId.EditorTabsBarAddTab, this.contextKeyService));
	const getActions = () => getFlatActionBarActions(menu.getActions({ shouldForwardArgs: true }));
	const addTabAction = toAction({
	id: 'editor.tabs.addTab',
	label: localize('addTab', "Add Tab"),
	class: ThemeIcon.asClassName(Codicon.add),
	run: () => { }
	});
	const dropdown = this._register(new DropdownMenuActionViewItem(addTabAction, { getActions }, this.contextMenuService, {
	classNames: ThemeIcon.asClassNameArray(Codicon.add)
	}));
	dropdown.render(container);
	const updateVisibility = () => this.addTabContainer?.classList.toggle('hidden', getActions().length === 0);
	updateVisibility();
	this._register(menu.onDidChange(() => updateVisibility()));
	}

Introduced by this commit

7317e60