fix normal dialog vertical scrolling issue (#23177)

src/sql/workbench/browser/modal/media/modal.css

@@ -18,12 +18,21 @@
 	border-width: 1px;
 }
 
-.modal:not(.flyout-dialog):not(.callout-dialog) .modal-dialog {
+.modal.normal-dialog .modal-dialog {
 	margin: auto;
 	width: 640px;
-	max-height: 480px;
 }
 
+.modal.normal-dialog .modal-dialog .modal-content {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+}
+
+.modal.normal-dialog .modal-dialog .modal-content .modal-body {
+	flex: 1 1 auto;
+	overflow-y: auto;
+}
 .modal .modal-header {
 	padding: 15px;
 }

src/sql/workbench/browser/modal/modal.ts

@@ -85,6 +85,10 @@ export interface IModalOptions {
 	renderHeader?: boolean;
 	renderFooter?: boolean;
 	dialogProperties?: IDialogProperties;
+	/**
+	 * The height of the dialog, only applicable when the dialog style is normal.
+	 */
+	height?: number;
 }
 
 const defaultOptions: IModalOptions = {
@@ -98,7 +102,8 @@ const defaultOptions: IModalOptions = {
 	hasSpinner: true,
 	renderHeader: true,
 	renderFooter: true,
-	dialogProperties: undefined
+	dialogProperties: undefined,
+	height: 480
 };
 
 export type HideReason = 'close' | 'cancel' | 'ok';
@@ -210,9 +215,16 @@ export abstract class Modal extends Disposable implements IThemable {
 
 		let top: number;
 		let builderClass = '.modal.fade';
-		builderClass += this._modalOptions.dialogStyle === 'flyout' ? '.flyout-dialog'
-			: this._modalOptions.dialogStyle === 'callout' ? '.callout-dialog'
-				: '';
+		switch (this._modalOptions.dialogStyle) {
+			case 'flyout':
+				builderClass += '.flyout-dialog';
+				break;
+			case 'callout':
+				builderClass += '.callout-dialog';
+				break;
+			default:
+				builderClass += '.normal-dialog';
+		}
 
 		this._bodyContainer = DOM.$(`${builderClass}`, { role: 'dialog', 'aria-label': this._title });
 
@@ -225,6 +237,12 @@ export abstract class Modal extends Disposable implements IThemable {
 		this._modalDialog = DOM.append(this._bodyContainer, DOM.$('.modal-dialog'));
 		const formElement = DOM.append(this._modalDialog, DOM.$('form'));
 
+		if (this._modalOptions.dialogStyle === 'normal') {
+			// set the height based on the available space and the expected height.
+			// so that the dialog can scroll vertically when needed.
+			this._modalDialog.style.height = `min(100%, ${this._modalOptions.height}px)`;
+		}
+
 		if (this._modalOptions.dialogStyle === 'callout') {
 			let arrowClass = `.callout-arrow.from-${this._modalOptions.dialogPosition}`;
 			this._modalContent = DOM.append(formElement, DOM.$(`.modal-content${arrowClass}`));

src/sql/workbench/services/connection/browser/media/passwordDialog.css

@@ -3,18 +3,11 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 .change-password-dialog {
-	padding: 30px;
-	height: 100%;
-	overflow: hidden;
+	padding: 10px;
 	display: flex;
 	flex-direction: column;
 }
 
-.change-password-dialog .properties-content {
-	flex: 1 1 auto;
-	overflow-y: auto;
-}
-
 .change-password-dialog .component-label-bold {
 	font-weight: 600;
 	padding-bottom: 30px;

src/sql/workbench/services/connection/browser/passwordChangeDialog.ts

@@ -57,7 +57,7 @@ export class PasswordChangeDialog extends Modal {
 		@IContextViewService private readonly contextViewService: IContextViewService,
 		@ITextResourcePropertiesService textResourcePropertiesService: ITextResourcePropertiesService,
 	) {
-		super('', '', telemetryService, layoutService, clipboardService, themeService, logService, textResourcePropertiesService, contextKeyService, { hasSpinner: true, spinnerTitle: passwordChangeLoadText, dialogStyle: 'normal', width: dialogWidth, dialogPosition: 'left' });
+		super('', '', telemetryService, layoutService, clipboardService, themeService, logService, textResourcePropertiesService, contextKeyService, { hasSpinner: true, spinnerTitle: passwordChangeLoadText, dialogStyle: 'normal', width: dialogWidth, dialogPosition: 'left', height: 350 });
 	}
 
 	public open(profile: IConnectionProfile): Promise<string> {

src/sql/workbench/services/errorMessage/browser/errorMessageDialog.ts

@@ -62,7 +62,7 @@ export class ErrorMessageDialog extends Modal {
 		@IOpenerService private readonly _openerService: IOpenerService,
 		protected _telemetryView: TelemetryKeys.TelemetryView | string = TelemetryKeys.TelemetryView.ErrorMessageDialog,
 	) {
-		super('', TelemetryKeys.ModalDialogName.ErrorMessage, telemetryService, layoutService, clipboardService, themeService, logService, textResourcePropertiesService, contextKeyService, { dialogStyle: 'normal', hasTitleIcon: true });
+		super('', TelemetryKeys.ModalDialogName.ErrorMessage, telemetryService, layoutService, clipboardService, themeService, logService, textResourcePropertiesService, contextKeyService, { dialogStyle: 'normal', hasTitleIcon: true, height: 340 });
 		this._okLabel = localize('errorMessageDialog.ok', "OK");
 		this._closeLabel = localize('errorMessageDialog.close', "Close");
 		this._readMoreLabel = localize('errorMessageDialog.readMore', "Read More");

src/sql/workbench/services/errorMessage/browser/media/errorMessageDialog.css

@@ -4,9 +4,8 @@
  *--------------------------------------------------------------------------------------------*/
 
 .error-dialog {
-	padding: 15px;
-	overflow: auto;
-	height: 210px;
+	padding: 10px;
+	height: calc(100% - 20px);
 }
 
 .error-dialog .codicon.error, .error-dialog .codicon.warning , .error-dialog .codicon.info {

src/sql/workbench/services/objectExplorer/browser/media/filterDialog.css

@@ -4,10 +4,11 @@
  *--------------------------------------------------------------------------------------------*/
 
 .filter-dialog-body {
-	height: 400px;
 	padding: 10px;
 	display: flex;
 	flex-direction: column;
+	height: calc(100% - 20px);
+	overflow: hidden;
 }
 
 .filter-table-container .filter-table {

src/sql/workbench/services/profiler/browser/media/profilerFilterDialog.css

@@ -4,8 +4,11 @@
  *--------------------------------------------------------------------------------------------*/
 
 .profiler-filter-dialog {
-	height: 300px;
 	padding: 10px;
+	display: flex;
+	flex-direction: column;
+	height: calc(100% - 20px);
+	overflow: flex;
 }
 
 .profiler-filter-clause-table {
@@ -13,9 +16,9 @@
 	margin-bottom: 10px;
 }
 
-.clause-table-container{
-	max-height: 270px;
+.clause-table-container {
 	overflow-y: scroll;
+	flex: 1 1 auto;
 }
 
 .profiler-filter-remove-condition {
@@ -24,10 +27,14 @@
 	cursor: pointer;
 }
 
+.profiler-filter-dialog .actions-container {
+	display: flex;
+	flex-direction: row;
+}
+
 .profiler-filter-clause-table-action {
 	cursor: pointer;
 	margin-right: 10px;
 	padding: 2px;
 	text-decoration: underline;
-	display: inline-block;
-}
+}

src/sql/workbench/services/profiler/browser/profilerFilterDialog.ts

@@ -119,24 +119,27 @@ export class ProfilerFilterDialog extends Modal {
 	protected renderBody(container: HTMLElement) {
 		const body = DOM.append(container, DOM.$('.profiler-filter-dialog'));
 		const clauseTableContainer = DOM.append(body, DOM.$('.clause-table-container'));
+		const actionsContainer = DOM.append(body, DOM.$('.actions-container'));
 		this._clauseBuilder = DOM.append(clauseTableContainer, DOM.$('table.profiler-filter-clause-table'));
 		const headerRow = DOM.append(this._clauseBuilder, DOM.$('tr'));
-		DOM.append(headerRow, DOM.$('td')).innerText = FieldText;
-		DOM.append(headerRow, DOM.$('td')).innerText = OperatorText;
-		DOM.append(headerRow, DOM.$('td')).innerText = ValueText;
-		DOM.append(headerRow, DOM.$('td')).innerText = '';
+		DOM.append(headerRow, DOM.$('th')).innerText = FieldText;
+		DOM.append(headerRow, DOM.$('th')).innerText = OperatorText;
+		DOM.append(headerRow, DOM.$('th')).innerText = ValueText;
+		DOM.append(headerRow, DOM.$('th')).innerText = '';
 
 		this._input!.filter.clauses.forEach(clause => {
 			this.addClauseRow(true, clause.field, this.convertToOperatorString(clause.operator), clause.value);
 		});
 
-		this.createClauseTableActionLink(AddClauseText, body, () => {
+
+
+		this.createClauseTableActionLink(AddClauseText, actionsContainer, () => {
 			this.addClauseRow(false);
 			// Set keyboard focus to the newly added clause.
 			this._clauseRows[this._clauseRows.length - 1]?.field?.focus();
 			aria.status(NewClauseAddedText);
 		});
-		this.createClauseTableActionLink(ClearText, body, () => { this.handleClearButtonClick(); });
+		this.createClauseTableActionLink(ClearText, actionsContainer, () => { this.handleClearButtonClick(); });
 	}
 
 	protected layout(height?: number): void {
@@ -169,7 +172,8 @@ export class ProfilerFilterDialog extends Modal {
 	private createClauseTableActionLink(text: string, parent: HTMLElement, handler: () => void): void {
 		const actionLink = DOM.append(parent, DOM.$('.profiler-filter-clause-table-action', {
 			'tabIndex': '0',
-			'role': 'button'
+			'role': 'button',
+			'aria-label': text
 		}));
 		actionLink.innerText = text;
 		DOM.addDisposableListener(actionLink, DOM.EventType.CLICK, handler);

src/sql/workbench/services/tableDesigner/browser/media/tableDesignerPublishDialog.css

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 
 .table-designer-publish-dialog {
-	height: 350px;
+	height: calc(100% - 20px);
 	padding: 10px;
 	display: flex;
 	flex-direction: column;