diff --git a/src/components/ha-wa-dialog.ts b/src/components/ha-wa-dialog.ts
index d89f784202..9681bc63f6 100644
--- a/src/components/ha-wa-dialog.ts
+++ b/src/components/ha-wa-dialog.ts
@@ -215,7 +215,15 @@ export class HaWaDialog extends ScrollableFadeMixin(LitElement) {
         wa-dialog {
           --full-width: var(
             --ha-dialog-width-full,
-            min(95vw, var(--safe-width))
+            min(
+              95vw,
+              calc(
+                100vw - var(--safe-area-inset-left, var(--ha-space-0)) - var(
+                    --safe-area-inset-right,
+                    var(--ha-space-0)
+                  )
+              )
+            )
           );
           --width: min(var(--ha-dialog-width-md, 580px), var(--full-width));
           --spacing: var(--dialog-content-padding, var(--ha-space-6));
@@ -233,7 +241,10 @@ export class HaWaDialog extends ScrollableFadeMixin(LitElement) {
             --ha-dialog-border-radius,
             var(--ha-border-radius-3xl)
           );
-          max-width: var(--ha-dialog-max-width, var(--safe-width));
+          max-width: var(--ha-dialog-max-width, 100vw);
+          max-width: var(--ha-dialog-max-width, 100svw);
+          /* TODO: animate view transition between width changes.
+          Needs https://github.com/home-assistant/frontend/pull/27281 for mixin */
         }
         @media (prefers-reduced-motion: reduce) {
           wa-dialog {
@@ -247,7 +258,7 @@ export class HaWaDialog extends ScrollableFadeMixin(LitElement) {
         }
 
         :host([width="large"]) wa-dialog {
-          --width: min(var(--ha-dialog-width-lg, 1024px), var(--full-width));
+          --width: min(var(--ha-dialog-width-lg, 720px), var(--full-width));
         }
 
         :host([width="full"]) wa-dialog {
@@ -259,130 +270,166 @@ export class HaWaDialog extends ScrollableFadeMixin(LitElement) {
           max-width: var(--width, var(--full-width));
           max-height: var(
             --ha-dialog-max-height,
-            calc(var(--safe-height) - var(--ha-space-20))
+            calc(100% - var(--ha-space-20))
           );
           min-height: var(--ha-dialog-min-height);
+          position: var(--dialog-surface-position, relative);
           margin-top: var(--dialog-surface-margin-top, auto);
-          /* Used to offset the dialog from the safe areas when space is limited */
-          transform: translate(
-            calc(
-              var(--safe-area-offset-left, var(--ha-space-0)) - var(
-                  --safe-area-offset-right,
-                  var(--ha-space-0)
-                )
-            ),
-            calc(
-              var(--safe-area-offset-top, var(--ha-space-0)) - var(
-                  --safe-area-offset-bottom,
-                  var(--ha-space-0)
-                )
-            )
-          );
           display: flex;
           flex-direction: column;
           overflow: hidden;
         }
 
         @media all and (max-width: 450px), all and (max-height: 500px) {
-          :host([type="standard"]) {
+          :host {
             --ha-dialog-border-radius: var(--ha-space-0);
+          }
 
-            wa-dialog {
-              /* Make the container fill the whole screen width and not the safe width */
-              --full-width: var(--ha-dialog-width-full, 100vw);
-              --width: var(--full-width);
-            }
+          :host([width="small"]) wa-dialog {
+            --width: min(var(--ha-dialog-width-sm, 320px), var(--full-width));
+          }
 
-            wa-dialog::part(dialog) {
-              /* Make the dialog fill the whole screen height and not the safe height */
-              min-height: var(--ha-dialog-min-height, 100vh);
-              min-height: var(--ha-dialog-min-height, 100dvh);
-              max-height: var(--ha-dialog-max-height, 100vh);
-              max-height: var(--ha-dialog-max-height, 100dvh);
-              margin-top: 0;
-              margin-bottom: 0;
-              /* Use safe area as padding instead of the container size */
-              padding-top: var(--safe-area-inset-top);
-              padding-bottom: var(--safe-area-inset-bottom);
-              padding-left: var(--safe-area-inset-left);
-              padding-right: var(--safe-area-inset-right);
-              /* Reset the transform to center the dialog */
-              transform: none;
+          :host([width="large"]) wa-dialog {
+            --width: min(var(--ha-dialog-width-lg, 1024px), var(--full-width));
+          }
+
+          :host([width="full"]) wa-dialog {
+            --width: var(--full-width);
+          }
+
+          wa-dialog::part(dialog) {
+            min-width: var(--width, var(--full-width));
+            max-width: var(--width, var(--full-width));
+            max-height: var(
+              --ha-dialog-max-height,
+              calc(var(--safe-height) - var(--ha-space-20))
+            );
+            min-height: var(--ha-dialog-min-height);
+            margin-top: var(--dialog-surface-margin-top, auto);
+            /* Used to offset the dialog from the safe areas when space is limited */
+            transform: translate(
+              calc(
+                var(--safe-area-offset-left, var(--ha-space-0)) - var(
+                    --safe-area-offset-right,
+                    var(--ha-space-0)
+                  )
+              ),
+              calc(
+                var(--safe-area-offset-top, var(--ha-space-0)) - var(
+                    --safe-area-offset-bottom,
+                    var(--ha-space-0)
+                  )
+              )
+            );
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+          }
+
+          @media all and (max-width: 450px), all and (max-height: 500px) {
+            :host([type="standard"]) {
+              --ha-dialog-border-radius: var(--ha-space-0);
+
+              wa-dialog {
+                /* Make the container fill the whole screen width and not the safe width */
+                --full-width: var(--ha-dialog-width-full, 100vw);
+                --width: var(--full-width);
+              }
+
+              wa-dialog::part(dialog) {
+                /* Make the dialog fill the whole screen height and not the safe height */
+                min-height: var(--ha-dialog-min-height, 100vh);
+                min-height: var(--ha-dialog-min-height, 100dvh);
+                max-height: var(--ha-dialog-max-height, 100vh);
+                max-height: var(--ha-dialog-max-height, 100dvh);
+                margin-top: 0;
+                margin-bottom: 0;
+                /* Use safe area as padding instead of the container size */
+                padding-top: var(--safe-area-inset-top);
+                padding-bottom: var(--safe-area-inset-bottom);
+                padding-left: var(--safe-area-inset-left);
+                padding-right: var(--safe-area-inset-right);
+                /* Reset the transform to center the dialog */
+                transform: none;
+              }
             }
           }
-        }
 
-        .header-title-container {
-          display: flex;
-          align-items: center;
-        }
+          .header-title-container {
+            display: flex;
+            align-items: center;
+          }
 
-        .header-title {
-          margin: 0;
-          margin-bottom: 0;
-          color: var(--ha-dialog-header-title-color, var(--primary-text-color));
-          font-size: var(
-            --ha-dialog-header-title-font-size,
-            var(--ha-font-size-2xl)
-          );
-          line-height: var(
-            --ha-dialog-header-title-line-height,
-            var(--ha-line-height-condensed)
-          );
-          font-weight: var(
-            --ha-dialog-header-title-font-weight,
-            var(--ha-font-weight-normal)
-          );
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          margin-right: var(--ha-space-3);
-        }
+          .header-title {
+            margin: 0;
+            margin-bottom: 0;
+            color: var(
+              --ha-dialog-header-title-color,
+              var(--primary-text-color)
+            );
+            font-size: var(
+              --ha-dialog-header-title-font-size,
+              var(--ha-font-size-2xl)
+            );
+            line-height: var(
+              --ha-dialog-header-title-line-height,
+              var(--ha-line-height-condensed)
+            );
+            font-weight: var(
+              --ha-dialog-header-title-font-weight,
+              var(--ha-font-weight-normal)
+            );
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            margin-right: var(--ha-space-3);
+          }
 
-        wa-dialog::part(body) {
-          padding: 0;
-          display: flex;
-          flex-direction: column;
-          max-width: 100%;
-          overflow: hidden;
-        }
+          wa-dialog::part(body) {
+            padding: 0;
+            display: flex;
+            flex-direction: column;
+            max-width: 100%;
+            overflow: hidden;
+          }
 
-        .content-wrapper {
-          position: relative;
-          flex: 1;
-          display: flex;
-          flex-direction: column;
-          min-height: 0;
-        }
+          .content-wrapper {
+            position: relative;
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            min-height: 0;
+          }
 
-        .body {
-          position: var(--dialog-content-position, relative);
-          padding: var(
-            --dialog-content-padding,
-            0 var(--ha-space-6) var(--ha-space-6) var(--ha-space-6)
-          );
-          overflow: auto;
-          flex-grow: 1;
-        }
-        :host([flexcontent]) .body {
-          max-width: 100%;
-          flex: 1;
-          display: flex;
-          flex-direction: column;
-        }
+          .body {
+            position: var(--dialog-content-position, relative);
+            padding: var(
+              --dialog-content-padding,
+              0 var(--ha-space-6) var(--ha-space-6) var(--ha-space-6)
+            );
+            overflow: auto;
+            flex-grow: 1;
+          }
+          :host([flexcontent]) .body {
+            max-width: 100%;
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+          }
 
-        wa-dialog::part(footer) {
-          padding: var(--ha-space-0);
-        }
+          wa-dialog::part(footer) {
+            padding: var(--ha-space-0);
+          }
 
-        ::slotted([slot="footer"]) {
-          display: flex;
-          padding: var(--ha-space-3) var(--ha-space-4) var(--ha-space-4)
-            var(--ha-space-4);
-          gap: var(--ha-space-3);
-          justify-content: flex-end;
-          align-items: center;
-          width: 100%;
+          ::slotted([slot="footer"]) {
+            display: flex;
+            padding: var(--ha-space-3) var(--ha-space-4) var(--ha-space-4)
+              var(--ha-space-4);
+            gap: var(--ha-space-3);
+            justify-content: flex-end;
+            align-items: center;
+            width: 100%;
+          }
         }
       `,
     ];