Rework ModalManager to use <dialog>

res/css/_common.pcss

@@ -278,22 +278,32 @@ legend {
  */
 
 .mx_Dialog_wrapper {
-    position: fixed;
-    z-index: 4000;
-    top: 0;
+    position: absolute;
     left: 0;
-    width: 100%;
-    height: 100%;
+    right: 0;
+    width: fit-content;
+    height: fit-content;
+    margin: auto;
 
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    // override browser default decorations
+    border: none;
+    background: unset;
+
+    &::backdrop {
+        position: fixed;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+
+        background-color: $dialog-backdrop-color;
+        opacity: 0.8;
+    }
 }
 
 .mx_Dialog {
     background-color: $background;
     color: $light-fg-color;
-    z-index: 4012;
     font-size: $font-15px;
     position: relative;
     padding: 24px;
@@ -375,33 +385,7 @@ legend {
     max-width: 704px;
 }
 
-.mx_Dialog_staticWrapper .mx_Dialog {
-    z-index: 4010;
-    contain: content;
-}
-
-.mx_Dialog_background {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: $dialog-backdrop-color;
-    opacity: 0.8;
-    z-index: 4011;
-}
-
-.mx_Dialog_background.mx_Dialog_staticBackground {
-    z-index: 4009;
-}
-
-.mx_Dialog_wrapperWithStaticUnder .mx_Dialog_background {
-    /* Roughly half of what it would normally be - we don't want to black out */
-    /* the app, just make it clear that the dialogs are stacked. */
-    opacity: 0.4;
-}
-
-.mx_Dialog_lightbox .mx_Dialog_background {
+.mx_Dialog_lightbox {
     opacity: $lightbox-background-bg-opacity;
     background-color: $lightbox-background-bg-color;
     animation-name: mx_Dialog_lightbox_background_keyframes;
@@ -585,7 +569,7 @@ legend {
 }
 
 /* Spinner Dialog overide */
-.mx_Dialog_wrapper.mx_Dialog_spinner .mx_Dialog {
+.mx_Dialog_spinner .mx_Dialog {
     width: auto;
     border-radius: 8px;
     padding: 8px;

res/css/components/views/beacon/_BeaconViewDialog.pcss

@@ -42,7 +42,6 @@ limitations under the License.
         }
 
         .mx_Dialog_cancelButton {
-            z-index: 4010;
             position: fixed;
             right: 5vw;
             top: 5vh;

res/css/views/dialogs/_CompoundDialog.pcss

@@ -20,13 +20,13 @@ limitations under the License.
 /* be in their respective stylesheets. */
 /* -------------------------------------------------------------------------------- */
 
-/* Override legacy/default styles for dialogs */
-.mx_Dialog_wrapper.mx_CompoundDialog > .mx_Dialog {
-    padding: 0; /* we'll manage it ourselves */
-    color: $primary-content;
-}
-
 .mx_CompoundDialog {
+    /* Override legacy/default styles for dialogs */
+    > .mx_Dialog {
+        padding: 0; /* we'll manage it ourselves */
+        color: $primary-content;
+    }
+
     .mx_CompoundDialog_header {
         padding: 32px 32px 16px 32px;
 

res/css/views/dialogs/_LocationViewDialog.pcss

@@ -39,7 +39,6 @@ limitations under the License.
         }
 
         .mx_Dialog_cancelButton {
-            z-index: 4010;
             position: absolute;
             right: 5vw;
             top: 5vh;

res/css/views/dialogs/_SpotlightDialog.pcss

@@ -14,11 +14,15 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+.mx_SpotlightDialog_wrapper {
+    overflow: visible;
+}
+
 .mx_SpotlightDialog_wrapper .mx_Dialog {
     border-radius: 8px;
     overflow-y: initial;
     position: relative;
-    height: 60%;
+    height: 60vh;
     padding: 0;
     contain: unset; /* needed for #mx_SpotlightDialog_keyboardPrompt to not be culled */
 

src/@types/global.d.ts

@@ -173,6 +173,10 @@ declare global {
         setSinkId(outputId: string): void;
     }
 
+    interface HTMLDialogElement {
+        oncancel?(ev: Event);
+    }
+
     // Add Chrome-specific `instant` ScrollBehaviour
     type _ScrollBehavior = ScrollBehavior | "instant";
 

src/AsyncWrapper.tsx

@@ -82,7 +82,8 @@ export default class AsyncWrapper extends React.Component<IProps, IState> {
         } else if (this.state.error) {
             return <BaseDialog onFinished={this.props.onFinished} title={_t("Error")}>
                 { _t("Unable to load! Check your network connectivity and try again.") }
-                <DialogButtons primaryButton={_t("Dismiss")}
+                <DialogButtons
+                    primaryButton={_t("Dismiss")}
                     onPrimaryButtonClick={this.onWrapperCancelClick}
                     hasCancel={false}
                 />