diff --git a/src/sql/base/browser/ui/modal/media/modal.css b/src/sql/base/browser/ui/modal/media/modal.css
index f639771d95fb..abe53a1d804e 100644
--- a/src/sql/base/browser/ui/modal/media/modal.css
+++ b/src/sql/base/browser/ui/modal/media/modal.css
@@ -66,14 +66,11 @@
 }
 
 .monaco-shell .modal.flyout-dialog .modal-body,
-.monaco-shell .modal.flyout-dialog .angular-modal-body {
-	margin-bottom: auto;
-	height: 100%;
-}
-
+.monaco-shell .modal.flyout-dialog .angular-modal-body,
 /* Style for body and footer in modal dialog. This should be applied to dialog created with angular component. */
 .monaco-shell .modal.flyout-dialog .modal-body-and-footer {
-	height: 100%;
+	flex: 1 1;
+	overflow: hidden;
 }
 
 /* modl body content style(excluding dialogErrorMessage section) for angulr component dialog */
@@ -85,6 +82,8 @@
 
 .modal.flyout-dialog .angular-form {
 	height: 100%;
+	display: flex;
+	flex-direction: column;
 }
 
 .modal.flyout-dialog .dialog-label {
@@ -105,10 +104,6 @@
 	padding-left: 4px;
 }
 
-.modal.flyout-dialog .modal-body {
-	overflow-y: auto;
-}
-
 .vs-dark.monaco-shell .modal.flyout-dialog .input {
 	background-color: #3C3C3C;
 }
@@ -187,7 +182,6 @@
 
 .modal.flyout-dialog .dialog-message-header {
 	overflow: hidden;
-	overflow-y: hidden;
 	display: flex;
 	flex-direction: row;
 }
diff --git a/src/sql/parts/disasterRecovery/backup/media/backupDialog.css b/src/sql/parts/disasterRecovery/backup/media/backupDialog.css
index 8ec1f1c1c229..e338fcec048b 100644
--- a/src/sql/parts/disasterRecovery/backup/media/backupDialog.css
+++ b/src/sql/parts/disasterRecovery/backup/media/backupDialog.css
@@ -17,7 +17,7 @@
 }
 
 .backup-dialog {
-	height: calc(100% - 15px)
+	height: 100%
 }
 
 .backup-dialog .advanced-main-header {