Modern UI tabs: reserve close-button column so it doesn't overlay fil…

…ename

The Modern UI tab action overlay (close/pin/dirty) sat on top of the
label, so clicking a filename near the trailing edge hit the close
control and closed the tab.

Reserve the overlay column as padding instead: every tab that can show
a trailing close/pin/dirty control now reserves 28px on the right
(matching the inset dirty/sticky tabs already used), and left-actions
tabs reserve 24px on the left. The absolutely positioned control then
renders in the reserved column and never covers the filename hit target.

Tabs with close actions off, and dirty tabs that only show the dirty
top border, keep the compact close-action-off padding since there is
no overlay to reserve.

Fixes #329605

src/vs/workbench/contrib/styleOverrides/browser/media/tabs.css

@@ -157,12 +157,13 @@
 	padding: 0 var(--vscode-spacing-size80) 0 var(--vscode-spacing-size60) !important;
 }
 
-.modern-ui-tabs .part.editor .tabs-container > .tab.dirty:not(.sticky-compact):not(.tab-actions-left):not(.close-action-off.dirty-border-top),
+/* Reserve the overlay column so close/pin/dirty never covers the filename (https://github.com/microsoft/vscode/issues/329605) */
+.modern-ui-tabs .part.editor .tabs-container > .tab:not(.sticky-compact):not(.tab-actions-left):not(.close-action-off),
 .modern-ui-tabs .part.editor .tabs-container > .tab.sticky:not(.sticky-compact):not(.pinned-action-off):not(.tab-actions-left) {
 	padding-right: var(--vscode-spacing-size280) !important;
 }
 
-.modern-ui-tabs .part.editor .tabs-container > .tab.dirty.tab-actions-left:not(.sticky-compact),
+.modern-ui-tabs .part.editor .tabs-container > .tab.tab-actions-left:not(.sticky-compact):not(.close-action-off),
 .modern-ui-tabs .part.editor .tabs-container > .tab.sticky.tab-actions-left:not(.sticky-compact):not(.pinned-action-off) {
 	padding-left: var(--vscode-spacing-size240) !important;
 	padding-right: var(--vscode-spacing-size80) !important;
@@ -304,11 +305,7 @@
 	display: none;
 }
 
-/*
- * Overlay tab actions on the label instead of reserving a trailing/leading
- * column. The action surface inherits the tab background while revealed so
- * label text and icons beneath it do not compete with the action glyph.
- */
+/* Overlay tab actions in the reserved trailing/leading column */
 .modern-ui-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab > .tab-actions {
 	position: absolute;
 	z-index: 7;