Dev tools events layout (#18389)

Co-authored-by: Bram Kragten <[email protected]>
home-assistant · Nov 29, 2023 · eda0d12 · eda0d12
1 parent 4a53de4
commit eda0d12
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 65 deletions.
diff --git a/src/panels/developer-tools/event/developer-tools-event.ts b/src/panels/developer-tools/event/developer-tools-event.ts
@@ -25,7 +25,11 @@ class HaPanelDevEvent extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <div class=${this.narrow ? "content" : "content layout horizontal"}>
+      <div
+        class=${this.narrow
+          ? "content layout vertical"
+          : "content layout horizontal"}
+      >
         <div class="flex">
           <p>
             ${this.hass.localize(
@@ -128,6 +132,7 @@ class HaPanelDevEvent extends LitElement {
       haStyle,
       css`
         .content {
+          gap: 16px;
           padding: 16px;
           padding: max(16px, env(safe-area-inset-top))
             max(16px, env(safe-area-inset-right))
@@ -145,6 +150,10 @@ class HaPanelDevEvent extends LitElement {
           display: block;
         }
 
+        .flex {
+          min-width: 0;
+        }
+
         .inputs {
           max-width: 400px;
         }
@@ -163,9 +172,7 @@ class HaPanelDevEvent extends LitElement {
 
         event-subscribe-card {
           display: block;
-          margin: 16px 16px 0 0;
-          margin-inline-start: initial;
-          margin-inline-end: 16px;
+          margin-top: 16px;
           direction: var(--direction);
         }
 

diff --git a/src/panels/developer-tools/event/event-subscribe-card.ts b/src/panels/developer-tools/event/event-subscribe-card.ts
@@ -39,55 +39,57 @@ class EventSubscribeCard extends LitElement {
           "ui.panel.developer-tools.tabs.events.listen_to_events"
         )}
       >
-        <form>
-          <ha-textfield
-            .label=${this._subscribed
-              ? this.hass!.localize(
-                  "ui.panel.developer-tools.tabs.events.listening_to"
-                )
-              : this.hass!.localize(
-                  "ui.panel.developer-tools.tabs.events.subscribe_to"
-                )}
-            .disabled=${this._subscribed !== undefined}
-            .value=${this._eventType}
-            @input=${this._valueChanged}
-          ></ha-textfield>
-          <mwc-button
-            .disabled=${this._eventType === ""}
-            @click=${this._handleSubmit}
-            type="submit"
-          >
-            ${this._subscribed
-              ? this.hass!.localize(
-                  "ui.panel.developer-tools.tabs.events.stop_listening"
-                )
-              : this.hass!.localize(
-                  "ui.panel.developer-tools.tabs.events.start_listening"
-                )}
-          </mwc-button>
-        </form>
-        <div class="events">
-          ${repeat(
-            this._events,
-            (event) => event.id,
-            (event) => html`
-              <div class="event">
-                ${this.hass!.localize(
-                  "ui.panel.developer-tools.tabs.events.event_fired",
-                  { name: event.id }
-                )}
-                ${formatTime(
-                  new Date(event.event.time_fired),
-                  this.hass!.locale,
-                  this.hass!.config
-                )}:
-                <ha-yaml-editor
-                  .defaultValue=${event.event}
-                  readOnly
-                ></ha-yaml-editor>
-              </div>
-            `
-          )}
+        <div class="card-content">
+          <form>
+            <ha-textfield
+              .label=${this._subscribed
+                ? this.hass!.localize(
+                    "ui.panel.developer-tools.tabs.events.listening_to"
+                  )
+                : this.hass!.localize(
+                    "ui.panel.developer-tools.tabs.events.subscribe_to"
+                  )}
+              .disabled=${this._subscribed !== undefined}
+              .value=${this._eventType}
+              @input=${this._valueChanged}
+            ></ha-textfield>
+            <mwc-button
+              .disabled=${this._eventType === ""}
+              @click=${this._handleSubmit}
+              type="submit"
+            >
+              ${this._subscribed
+                ? this.hass!.localize(
+                    "ui.panel.developer-tools.tabs.events.stop_listening"
+                  )
+                : this.hass!.localize(
+                    "ui.panel.developer-tools.tabs.events.start_listening"
+                  )}
+            </mwc-button>
+          </form>
+          <div class="events">
+            ${repeat(
+              this._events,
+              (event) => event.id,
+              (event) => html`
+                <div class="event">
+                  ${this.hass!.localize(
+                    "ui.panel.developer-tools.tabs.events.event_fired",
+                    { name: event.id }
+                  )}
+                  ${formatTime(
+                    new Date(event.event.time_fired),
+                    this.hass!.locale,
+                    this.hass!.config
+                  )}:
+                  <ha-yaml-editor
+                    .defaultValue=${event.event}
+                    readOnly
+                  ></ha-yaml-editor>
+                </div>
+              `
+            )}
+          </div>
         </div>
       </ha-card>
     `;
@@ -121,19 +123,9 @@ class EventSubscribeCard extends LitElement {
 
   static get styles(): CSSResultGroup {
     return css`
-      form {
-        display: block;
-        padding: 0 0 16px 16px;
-      }
       ha-textfield {
-        width: 300px;
-      }
-      mwc-button {
-        vertical-align: middle;
-      }
-      .events {
-        margin: -16px 0;
-        padding: 0 16px;
+        display: block;
+        margin-bottom: 16px;
       }
       .event {
         border-top: 1px solid var(--divider-color);
@@ -143,6 +135,7 @@ class EventSubscribeCard extends LitElement {
       }
       .event:last-child {
         border-bottom: 0;
+        margin-bottom: 0;
       }
       pre {
         font-family: var(--code-font-family, monospace);