From fae73fe6ff03591962c0249b3f01d030372897be Mon Sep 17 00:00:00 2001
From: Alan Ren <alanren@microsoft.com>
Date: Thu, 2 Apr 2020 10:30:08 -0700
Subject: [PATCH] update style of toggle tab header button (#9827)

---
 src/sql/base/browser/ui/panel/media/panel.css    | 9 ++++++---
 src/sql/base/browser/ui/panel/panel.component.ts | 2 +-
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/sql/base/browser/ui/panel/media/panel.css b/src/sql/base/browser/ui/panel/media/panel.css
index e8e7b9b6df..23b65ee8de 100644
--- a/src/sql/base/browser/ui/panel/media/panel.css
+++ b/src/sql/base/browser/ui/panel/media/panel.css
@@ -144,9 +144,11 @@ panel {
 	border-color: rgb(214, 214, 214);
 }
 
-.tabbedPanel .action-container {
+.tabbedPanel .vertical-tab-action-container {
 	display: flex;
 	flex-flow: row-reverse;
+	height: 35px;
+	padding: 0px 5px;
 }
 
 .tabbedPanel .tab-action {
@@ -155,9 +157,10 @@ panel {
 	padding: 0px;
 	border: 0px;
 	background-color: transparent;
-	background-position: 2px center;
+	background-position: center;
 	background-repeat: no-repeat;
-	background-size: 11px 11px;
+	background-size: 9px 9px;
+	align-self: center;
 }
 
 .vs .tabbedPanel .tab-action.collapse {
diff --git a/src/sql/base/browser/ui/panel/panel.component.ts b/src/sql/base/browser/ui/panel/panel.component.ts
index 6b79433717..1dd8dd6543 100644
--- a/src/sql/base/browser/ui/panel/panel.component.ts
+++ b/src/sql/base/browser/ui/panel/panel.component.ts
@@ -52,7 +52,7 @@ let idPool = 0;
 		<div class="tabbedPanel fullsize" [ngClass]="options.layout === NavigationBarLayout.vertical ? 'vertical' : 'horizontal'">
 			<div *ngIf="!options.showTabsWhenOne ? _tabs.length !== 1 : true" class="composite title">
 				<div class="tabContainer">
-					<div *ngIf="options.layout === NavigationBarLayout.vertical" class="action-container">
+					<div *ngIf="options.layout === NavigationBarLayout.vertical" class="vertical-tab-action-container">
 						<button [attr.aria-expanded]="_tabExpanded" [title]="toggleTabPanelButtonAriaLabel" [attr.aria-label]="toggleTabPanelButtonAriaLabel" [ngClass]="toggleTabPanelButtonCssClass" tabindex="0" (click)="toggleTabPanel()"></button>
 					</div>
 					<div [style.display]="_tabExpanded ? 'flex': 'none'" [attr.aria-hidden]="_tabExpanded ? 'false': 'true'" class="tabList" role="tablist" scrollable [horizontalScroll]="AutoScrollbarVisibility" [verticalScroll]="HiddenScrollbarVisibility" [scrollYToX]="true" (keydown)="onKey($event)">