Modal dialogs become unreadable after applying max zoom (#25293)

microsoft · Feb 7, 2024 · a2ecb5f · a2ecb5f
1 parent 4ad6ca1
commit a2ecb5f
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/src/sql/workbench/browser/modal/media/modal.css b/src/sql/workbench/browser/modal/media/modal.css
@@ -43,9 +43,15 @@
 }
 
 /** FLYOUT **/
+.modal.flyout-dialog .modal-dialog .modal-dialog-container {
+	display: contents;
+	overflow-x: auto;
+}
+
 .modal.flyout-dialog .modal-dialog {
-	margin: auto auto auto auto;
+	margin: auto 0 auto auto;
 	height: 100%;
+	max-width: 100%;
 	right: 0;
 	position: absolute;
 	overflow-y: hidden;

diff --git a/src/sql/workbench/browser/modal/modal.ts b/src/sql/workbench/browser/modal/modal.ts
@@ -138,6 +138,7 @@ export abstract class Modal extends Disposable implements IThemable {
 	private _dialogExteriorBorder?: Color;
 	private _dialogShadowColor?: Color;
 
+	private _modalDialogContainer?: HTMLElement;
 	private _modalDialog?: HTMLElement;
 	private _modalContent?: HTMLElement;
 	private _modalHeaderSection?: HTMLElement;
@@ -236,7 +237,8 @@ export abstract class Modal extends Disposable implements IThemable {
 		}
 		this._bodyContainer.style.top = `${top}px`;
 		this._modalDialog = DOM.append(this._bodyContainer, DOM.$('.modal-dialog'));
-		const formElement = DOM.append(this._modalDialog, DOM.$('form'));
+		this._modalDialogContainer = DOM.append(this._modalDialog, DOM.$('.modal-dialog-container'));
+		const formElement = DOM.append(this._modalDialogContainer, DOM.$('form'));
 
 		if (this._modalOptions.dialogStyle === 'normal') {
 			// set the height based on the available space and the expected height.