Merge pull request #294094 from microsoft/mrleemurray/delighted-tan-tern

Reduce activity bar dimensions and improve styling

Author: mrleemurray

src/vs/workbench/browser/parts/activitybar/activitybarPart.ts

@@ -41,16 +41,16 @@ import { SwitchCompositeViewAction } from '../compositeBarActions.js';
 
 export class ActivitybarPart extends Part {
 
-	static readonly ACTION_HEIGHT = 48;
+	static readonly ACTION_HEIGHT = 32;
 
 	static readonly pinnedViewContainersKey = 'workbench.activity.pinnedViewlets2';
 	static readonly placeholderViewContainersKey = 'workbench.activity.placeholderViewlets';
 	static readonly viewContainersWorkspaceStateKey = 'workbench.activity.viewletsWorkspaceState';
 
 	//#region IView
 
-	readonly minimumWidth: number = 48;
-	readonly maximumWidth: number = 48;
+	readonly minimumWidth: number = 36;
+	readonly maximumWidth: number = 36;
 	readonly minimumHeight: number = 0;
 	readonly maximumHeight: number = Number.POSITIVE_INFINITY;
 

src/vs/workbench/browser/parts/activitybar/media/activityaction.css

@@ -12,7 +12,7 @@
 .monaco-workbench .activitybar > .content .composite-bar > .monaco-action-bar .action-item::after {
 	position: absolute;
 	content: '';
-	width: 48px;
+	width: 36px;
 	height: 2px;
 	display: none;
 	background-color: transparent;
@@ -46,21 +46,21 @@
 	z-index: 1;
 	display: flex;
 	overflow: hidden;
-	width: 48px;
-	height: 48px;
+	width: 36px;
+	height: 32px;
 	margin-right: 0;
 	box-sizing: border-box;
 
 }
 
 .monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-label:not(.codicon) {
 	font-size: 15px;
-	line-height: 40px;
-	padding: 0 0 0 48px;
+	line-height: 32px;
+	padding: 0 0 0 36px;
 }
 
 .monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-label.codicon {
-	font-size: 24px;
+	font-size: 16px;
 	align-items: center;
 	justify-content: center;
 }
@@ -157,27 +157,28 @@
 
 .monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .badge .badge-content {
 	position: absolute;
-	top: 24px;
-	right: 8px;
+	top: 17px;
+	right: 6px;
 	font-size: 9px;
 	font-weight: 600;
-	min-width: 8px;
-	height: 16px;
-	line-height: 16px;
-	padding: 0 4px;
-	border-radius: 20px;
+	min-width: 9px;
+	height: 13px;
+	line-height: 13px;
+	padding: 0 2px;
+	border-radius: 13px;
 	text-align: center;
+	border: none !important;
 }
 
 .monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .profile-badge .profile-text-overlay {
 	position: absolute;
 	font-weight: 600;
-	font-size: 9px;
-	line-height: 10px;
-	top: 24px;
-	right: 6px;
-	padding: 2px 3px;
-	border-radius: 7px;
+	font-size: 8px;
+	line-height: 8px;
+	top: 14px;
+	right: 2px;
+	padding: 2px 2px;
+	border-radius: 6px;
 	background-color: var(--vscode-profileBadge-background);
 	color: var(--vscode-profileBadge-foreground);
 	border: 2px solid var(--vscode-activityBar-background);

src/vs/workbench/browser/parts/activitybar/media/activitybarpart.css

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 
 .monaco-workbench .part.activitybar {
-	width: 48px;
+	width: 36px;
 	height: 100%;
 }