From c6418658918f0091c1a89e5b3b8deef4e49a2b74 Mon Sep 17 00:00:00 2001
From: Barbara Valdez <34872381+barbaravaldez@users.noreply.github.com>
Date: Tue, 3 Oct 2023 13:15:50 -0700
Subject: [PATCH] Use vertical tabs in server and database properties (#24521)

* use vertical tabs

* remove always show tabs option

* remove extra comma
---
 extensions/mssql/src/objectManagement/ui/databaseDialog.ts  | 5 +++++
 .../mssql/src/objectManagement/ui/serverPropertiesDialog.ts | 6 ++++++
 2 files changed, 11 insertions(+)

diff --git a/extensions/mssql/src/objectManagement/ui/databaseDialog.ts b/extensions/mssql/src/objectManagement/ui/databaseDialog.ts
index 5dbccf4833..317863c071 100644
--- a/extensions/mssql/src/objectManagement/ui/databaseDialog.ts
+++ b/extensions/mssql/src/objectManagement/ui/databaseDialog.ts
@@ -18,6 +18,7 @@ import * as vscode from 'vscode';
 const MAXDOP_Max_Limit = 32767;
 const PAUSED_RESUMABLE_INDEX_Max_Limit = 71582;
 const DscTableRowLength = 15;
+const Dialog_Width = '750px';
 
 export class DatabaseDialog extends ObjectManagementDialogBase<Database, DatabaseViewInfo> {
 	// Database Properties tabs
@@ -122,6 +123,7 @@ export class DatabaseDialog extends ObjectManagementDialogBase<Database, Databas
 
 
 	constructor(objectManagementService: IObjectManagementService, options: ObjectManagementDialogOptions) {
+		options.width = Dialog_Width;
 		super(objectManagementService, options);
 	}
 
@@ -267,6 +269,9 @@ export class DatabaseDialog extends ObjectManagementDialogBase<Database, Databas
 			const propertiesTabGroup = { title: '', tabs: tabs };
 			const propertiesTabbedPannel = this.modelView.modelBuilder.tabbedPanel()
 				.withTabs([propertiesTabGroup])
+				.withLayout({
+					orientation: azdata.TabOrientation.Vertical
+				})
 				.withProps({
 					CSSStyles: {
 						'margin': '-10px 0px 0px -10px'
diff --git a/extensions/mssql/src/objectManagement/ui/serverPropertiesDialog.ts b/extensions/mssql/src/objectManagement/ui/serverPropertiesDialog.ts
index 9b7f9bca68..5e9bd6010a 100644
--- a/extensions/mssql/src/objectManagement/ui/serverPropertiesDialog.ts
+++ b/extensions/mssql/src/objectManagement/ui/serverPropertiesDialog.ts
@@ -11,6 +11,8 @@ import * as localizedConstants from '../localizedConstants';
 import * as constants from '../constants';
 import { Server, ServerViewInfo, NumaNode, AffinityType, ServerLoginMode, AuditLevel } from '../interfaces';
 
+const Dialog_Width = '750px';
+
 export class ServerPropertiesDialog extends ObjectManagementDialogBase<Server, ServerViewInfo> {
 	private generalTab: azdata.Tab;
 	private readonly generalTabId: string = 'generalId';
@@ -90,6 +92,7 @@ export class ServerPropertiesDialog extends ObjectManagementDialogBase<Server, S
 	private shouldRestartServer: boolean = false;
 
 	constructor(objectManagementService: IObjectManagementService, options: ObjectManagementDialogOptions) {
+		options.width = Dialog_Width;
 		super(objectManagementService, options);
 		this.disposables.push(this.dialogObject.onClosed(async (reason: azdata.window.CloseReason) => {
 			if (reason === 'ok') {
@@ -138,6 +141,9 @@ export class ServerPropertiesDialog extends ObjectManagementDialogBase<Server, S
 		const serverPropertiesTabGroup = { title: '', tabs: [this.generalTab, this.memoryTab, this.processorsTab, this.securityTab, this.databaseSettingsTab, this.advancedTab] };
 		const serverPropertiesTabbedPannel = this.modelView.modelBuilder.tabbedPanel()
 			.withTabs([serverPropertiesTabGroup])
+			.withLayout({
+				orientation: azdata.TabOrientation.Vertical
+			})
 			.withProps({
 				CSSStyles: {
 					'margin': '-10px 0px 0px -10px'