From 6e3cf0975b49a3853052385e69b15e5a617af293 Mon Sep 17 00:00:00 2001
From: karwosts <32912880+karwosts@users.noreply.github.com>
Date: Tue, 13 Jun 2023 08:22:45 -0700
Subject: [PATCH] Fix mqtt debug info dialog too big (#16893)

---
 .../mqtt/dialog-mqtt-device-debug-info.ts          | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/panels/config/devices/device-detail/integration-elements/mqtt/dialog-mqtt-device-debug-info.ts b/src/panels/config/devices/device-detail/integration-elements/mqtt/dialog-mqtt-device-debug-info.ts
index 933ed8769c..d3d15a4a28 100644
--- a/src/panels/config/devices/device-detail/integration-elements/mqtt/dialog-mqtt-device-debug-info.ts
+++ b/src/panels/config/devices/device-detail/integration-elements/mqtt/dialog-mqtt-device-debug-info.ts
@@ -250,8 +250,18 @@ class DialogMQTTDeviceDebugInfo extends LitElement {
       haStyleDialog,
       css`
         ha-dialog {
-          --mdc-dialog-max-width: 95%;
-          --mdc-dialog-min-width: 640px;
+          --mdc-dialog-max-width: 95vw;
+          --mdc-dialog-min-width: min(640px, 95vw);
+        }
+        @media all and (max-width: 450px), all and (max-height: 500px) {
+          ha-dialog {
+            --mdc-dialog-min-width: calc(
+              100vw - env(safe-area-inset-right) - env(safe-area-inset-left)
+            );
+            --mdc-dialog-max-width: calc(
+              100vw - env(safe-area-inset-right) - env(safe-area-inset-left)
+            );
+          }
         }
         ha-switch {
           margin: 16px;