diff --git a/api/js/etemplate/Et2Dialog/Et2Dialog.ts b/api/js/etemplate/Et2Dialog/Et2Dialog.ts
index a9a9da9056..9f3a099223 100644
--- a/api/js/etemplate/Et2Dialog/Et2Dialog.ts
+++ b/api/js/etemplate/Et2Dialog/Et2Dialog.ts
@@ -235,7 +235,7 @@ export class Et2Dialog extends Et2Widget(SlotMixin(SlDialog))
 			/**
 			 * Allow other controls to be accessed while the dialog is visible
 			 */
-			modal: Boolean,
+			modal: {type: Boolean, reflect: true},
 
 			/**
 			 * Title for the dialog, goes in the header
diff --git a/api/templates/default/etemplate2.css b/api/templates/default/etemplate2.css
index 06527c058c..cb4566ab32 100644
--- a/api/templates/default/etemplate2.css
+++ b/api/templates/default/etemplate2.css
@@ -788,6 +788,12 @@ et2-dialog .dialog--has_message {
     display: flex;
 }
 
+/* Non-modal dialogs don't cover application tabs (add them to the app content div), not body */
+et2-dialog:not([modal])::part(base), et2-dialog:not([modal])::part(overlay) {
+    inset: 50px 0 0 0;
+}
+
+
 /**
  * Custom field list
  */
@@ -2718,24 +2724,6 @@ table.egwGridView_outer thead tr th.noResize:hover {
     background-color: #3875d7;
 }
 
-/**
- * et2_dialog: EGroupware left aligns all buttons, but [Delete]
- */
-div.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
-    float: left;
-    width: 100%;
-}
-
-div.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button {
-    float: left;
-    margin-right: 1em;
-    background-position: 3px;
-    outline: none;
-}
-
-div.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button.right {
-    float: right;
-}
 
 .et2_prompt #message {
     white-space: pre-wrap;
@@ -2769,10 +2757,6 @@ div.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button.right {
     background-image: none;
 }
 
-div.ui-dialog div.ui-dialog-content > div {
-    width: 100%;
-}
-
 /**
 * et2_toolbar
 */