Modern UI: Adjust padding for status bar items (#331496)

style(statusBar): adjust padding for first and last visible items for symmetry

Co-authored-by: mrleemurray <mrleemurray@users.noreply.github.com>

Author: mrleemurray

src/vs/workbench/contrib/modernUI/browser/media/statusBar.css

@@ -60,10 +60,12 @@
 	background-image: linear-gradient(var(--vscode-statusBarItem-compactHoverBackground), var(--vscode-statusBarItem-compactHoverBackground));
 }
 
+/*
+ * The items at either end of the status bar attach to the corner in the base
+ * styles, which pads them asymmetrically. As pills they need even padding on
+ * both sides, so give both end items the same symmetric inset.
+ */
+.modern-ui .part.statusbar > .items-container > .statusbar-item.left.first-visible-item > .statusbar-item-label,
 .modern-ui .part.statusbar > .items-container > .statusbar-item.right.last-visible-item > .statusbar-item-label {
 	padding: 0 var(--vscode-spacing-size60);
 }
-
-.modern-ui .part.statusbar > .items-container > .statusbar-item.left.first-visible-item > .statusbar-item-label {
-	padding-right: var(--vscode-spacing-size40);
-}