Fix margin between buttons row and attributes in more info (#17738)

src/components/ha-attributes.ts

@@ -1,12 +1,19 @@
 import { HassEntity } from "home-assistant-js-websocket";
-import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  nothing,
+  PropertyValues,
+} from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { computeAttributeNameDisplay } from "../common/entity/compute_attribute_display";
 import { STATE_ATTRIBUTES } from "../data/entity_attributes";
 import { haStyle } from "../resources/styles";
 import { HomeAssistant } from "../types";
-import "./ha-expansion-panel";
 import "./ha-attribute-value";
+import "./ha-expansion-panel";
 
 @customElement("ha-attributes")
 class HaAttributes extends LitElement {
@@ -18,16 +25,30 @@ class HaAttributes extends LitElement {
 
   @state() private _expanded = false;
 
+  private get _filteredAttributes() {
+    return this.computeDisplayAttributes(
+      STATE_ATTRIBUTES.concat(
+        this.extraFilters ? this.extraFilters.split(",") : []
+      )
+    );
+  }
+
+  protected willUpdate(changedProperties: PropertyValues): void {
+    if (
+      changedProperties.has("extraFilters") ||
+      changedProperties.has("stateObj")
+    ) {
+      this.toggleAttribute("empty", this._filteredAttributes.length === 0);
+    }
+  }
+
   protected render() {
     if (!this.stateObj) {
       return nothing;
     }
 
-    const attributes = this.computeDisplayAttributes(
+    const attributes = this._filteredAttributes;
-      STATE_ATTRIBUTES.concat(
+
-        this.extraFilters ? this.extraFilters.split(",") : []
-      )
-    );
     if (attributes.length === 0) {
       return nothing;
     }

src/dialogs/more-info/components/ha-more-info-control-style.ts

@@ -34,6 +34,10 @@ export const moreInfoControlStyle = css`
   }
 
   ha-attributes {
+    display: block;
     width: 100%;
   }
+  ha-more-info-control-select-container + ha-attributes:not([empty]) {
+    margin-top: 16px;
+  }
 `;