From f41330a29b8b02ecbbb4c1db851c202c89336dd8 Mon Sep 17 00:00:00 2001
From: Jan Bouwhuis <jbouwh@users.noreply.github.com>
Date: Thu, 22 Dec 2022 15:43:55 +0100
Subject: [PATCH] Allign MQTT config panel controls (#14818)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>
---
 .../mqtt/mqtt-config-panel.ts                 | 68 ++++++++++------
 .../mqtt/mqtt-subscribe-card.ts               | 77 ++++++++++++-------
 2 files changed, 97 insertions(+), 48 deletions(-)

diff --git a/src/panels/config/integrations/integration-panels/mqtt/mqtt-config-panel.ts b/src/panels/config/integrations/integration-panels/mqtt/mqtt-config-panel.ts
index a60764a184..5ab4a00ab2 100644
--- a/src/panels/config/integrations/integration-panels/mqtt/mqtt-config-panel.ts
+++ b/src/panels/config/integrations/integration-panels/mqtt/mqtt-config-panel.ts
@@ -50,28 +50,30 @@ class HaPanelDevMqtt extends LitElement {
             )}
           >
             <div class="card-content">
-              <ha-textfield
-                .label=${this.hass.localize("ui.panel.config.mqtt.topic")}
-                .value=${this.topic}
-                @change=${this._handleTopic}
-              ></ha-textfield>
-              <ha-select
-                .label=${this.hass.localize("ui.panel.config.mqtt.qos")}
-                .value=${this.qos}
-                @selected=${this._handleQos}
-                >${qosLevel.map(
-                  (qos) =>
-                    html`<mwc-list-item .value=${qos}>${qos}</mwc-list-item>`
-                )}
-              </ha-select>
-              <ha-formfield
-                label=${this.hass!.localize("ui.panel.config.mqtt.retain")}
-              >
-                <ha-switch
-                  @change=${this._handleRetain}
-                  .checked=${this.retain}
-                ></ha-switch>
-              </ha-formfield>
+              <div class="panel-dev-mqtt-fields">
+                <ha-textfield
+                  .label=${this.hass.localize("ui.panel.config.mqtt.topic")}
+                  .value=${this.topic}
+                  @change=${this._handleTopic}
+                ></ha-textfield>
+                <ha-select
+                  .label=${this.hass.localize("ui.panel.config.mqtt.qos")}
+                  .value=${this.qos}
+                  @selected=${this._handleQos}
+                  >${qosLevel.map(
+                    (qos) =>
+                      html`<mwc-list-item .value=${qos}>${qos}</mwc-list-item>`
+                  )}
+                </ha-select>
+                <ha-formfield
+                  label=${this.hass!.localize("ui.panel.config.mqtt.retain")}
+                >
+                  <ha-switch
+                    @change=${this._handleRetain}
+                    .checked=${this.retain}
+                  ></ha-switch>
+                </ha-formfield>
+              </div>
               <p>${this.hass.localize("ui.panel.config.mqtt.payload")}</p>
               <ha-code-editor
                 mode="jinja2"
@@ -160,6 +162,28 @@ class HaPanelDevMqtt extends LitElement {
           margin: 0 auto;
           direction: ltr;
         }
+        .panel-dev-mqtt-fields {
+          display: flex;
+          justify-content: space-between;
+          flex-wrap: wrap;
+        }
+        ha-select {
+          width: 96px;
+          margin: 0 8px;
+        }
+        ha-textfield {
+          flex: 1;
+        }
+        @media screen and (max-width: 600px) {
+          ha-select {
+            margin-left: 0px;
+            margin-top: 8px;
+          }
+          ha-textfield {
+            flex: auto;
+            width: 100%;
+          }
+        }
         ha-card:first-child {
           margin-bottom: 16px;
         }
diff --git a/src/panels/config/integrations/integration-panels/mqtt/mqtt-subscribe-card.ts b/src/panels/config/integrations/integration-panels/mqtt/mqtt-subscribe-card.ts
index 037cbfef23..b953b7e4a5 100644
--- a/src/panels/config/integrations/integration-panels/mqtt/mqtt-subscribe-card.ts
+++ b/src/panels/config/integrations/integration-panels/mqtt/mqtt-subscribe-card.ts
@@ -47,32 +47,35 @@ class MqttSubscribeCard extends LitElement {
         header=${this.hass.localize("ui.panel.config.mqtt.description_listen")}
       >
         <form>
-          <ha-textfield
-            .label=${this._subscribed
-              ? this.hass.localize("ui.panel.config.mqtt.listening_to")
-              : this.hass.localize("ui.panel.config.mqtt.subscribe_to")}
-            .disabled=${this._subscribed !== undefined}
-            .value=${this._topic}
-            @change=${this._handleTopic}
-          ></ha-textfield>
-          <ha-select
-            .label=${this.hass.localize("ui.panel.config.mqtt.qos")}
-            .disabled=${this._subscribed !== undefined}
-            .value=${this._qos}
-            @selected=${this._handleQos}
-            >${qosLevel.map(
-              (qos) => html`<mwc-list-item .value=${qos}>${qos}</mwc-list-item>`
-            )}
-          </ha-select>
-          <mwc-button
-            .disabled=${this._topic === ""}
-            @click=${this._handleSubmit}
-            type="submit"
-          >
-            ${this._subscribed
-              ? this.hass.localize("ui.panel.config.mqtt.stop_listening")
-              : this.hass.localize("ui.panel.config.mqtt.start_listening")}
-          </mwc-button>
+          <div class="panel-dev-mqtt-subscribe-fields">
+            <ha-textfield
+              .label=${this._subscribed
+                ? this.hass.localize("ui.panel.config.mqtt.listening_to")
+                : this.hass.localize("ui.panel.config.mqtt.subscribe_to")}
+              .disabled=${this._subscribed !== undefined}
+              .value=${this._topic}
+              @change=${this._handleTopic}
+            ></ha-textfield>
+            <ha-select
+              .label=${this.hass.localize("ui.panel.config.mqtt.qos")}
+              .disabled=${this._subscribed !== undefined}
+              .value=${this._qos}
+              @selected=${this._handleQos}
+              >${qosLevel.map(
+                (qos) =>
+                  html`<mwc-list-item .value=${qos}>${qos}</mwc-list-item>`
+              )}
+            </ha-select>
+            <mwc-button
+              .disabled=${this._topic === ""}
+              @click=${this._handleSubmit}
+              type="submit"
+            >
+              ${this._subscribed
+                ? this.hass.localize("ui.panel.config.mqtt.stop_listening")
+                : this.hass.localize("ui.panel.config.mqtt.start_listening")}
+            </mwc-button>
+          </div>
         </form>
         <div class="events">
           ${this._messages.map(
@@ -170,6 +173,28 @@ class MqttSubscribeCard extends LitElement {
       pre {
         font-family: var(--code-font-family, monospace);
       }
+      .panel-dev-mqtt-subscribe-fields {
+        display: flex;
+        justify-content: space-between;
+        flex-wrap: wrap;
+      }
+      ha-select {
+        width: 96px;
+        margin: 0 8px;
+      }
+      ha-textfield {
+        flex: 1;
+      }
+      @media screen and (max-width: 600px) {
+        ha-select {
+          margin-left: 0px;
+          margin-top: 8px;
+        }
+        ha-textfield {
+          flex: auto;
+          width: 100%;
+        }
+      }
     `;
   }
 }