feat(dialog): add CSS properties for max size

When a dialog is displayed fullscreen inside a popup window, the current backdrop creates an ugly
grey border around the dialog element. There should not be a need for a backdrop, margins or
rounded corners when a dialog is displayed fullscreen in a popup window and there is no context
behind it.

src/components/dialog/dialog.scss

@@ -13,6 +13,9 @@
  * @prop --dialog-heading-supporting-text-color: Color of the supporting text.
  * @prop --dialog-heading-icon-color: Color of the icon.
  * @prop --dialog-heading-icon-background-color: Background color of the icon when displayed as a badge.
+ * @prop --dialog-max-width: Max width of the dialog.
+ * @prop --dialog-max-height: Max height of the dialog.
+ * @prop --dialog-border-radius: Border radius of the dialog corners
  */
 
 :host {
@@ -45,13 +48,18 @@
     }
     .mdc-dialog__container {
         height: 100%;
+        width: var(--dialog-width, auto);
     }
 
     .mdc-dialog__surface {
         width: var(--dialog-width, auto);
         height: var(--dialog-height, auto);
         background-color: var(--dialog-background-color);
         box-shadow: var(--shadow-depth-64);
+
+        max-width: var(--dialog-max-width, calc(100vw - 2rem));
+        max-height: var(--dialog-max-height, calc(100% - 2rem));
+        border-radius: var(--dialog-border-radius, 0.25rem);
     }
 }