Draw a <hr> above the attributes in more-info (#9090)

src/components/ha-attributes.ts

@@ -27,13 +27,19 @@ class HaAttributes extends LitElement {
       return html``;
     }
 
+    const attributes = this.computeDisplayAttributes(
+      Object.keys(hassAttributeUtil.LOGIC_STATE_ATTRIBUTES).concat(
+        this.extraFilters ? this.extraFilters.split(",") : []
+      )
+    );
+    if (attributes.length === 0) {
+      return html``;
+    }
+
     return html`
+      <hr />
       <div>
-        ${this.computeDisplayAttributes(
-          Object.keys(hassAttributeUtil.LOGIC_STATE_ATTRIBUTES).concat(
-            this.extraFilters ? this.extraFilters.split(",") : []
-          )
-        ).map(
+        ${attributes.map(
           (attribute) => html`
             <div class="data-entry">
               <div class="key">${formatAttributeName(attribute)}</div>
@@ -80,6 +86,11 @@ class HaAttributes extends LitElement {
           overflow-wrap: break-word;
           white-space: pre-line;
         }
+        hr {
+          border-color: var(--divider-color);
+          border-bottom: none;
+          margin: 16px 0;
+        }
       `,
     ];
   }

src/dialogs/more-info/controls/more-info-automation.ts

@@ -26,6 +26,7 @@ class MoreInfoAutomation extends LitElement {
     }
 
     return html`
+      <hr />
       <div class="flex">
         <div>${this.hass.localize("ui.card.automation.last_triggered")}:</div>
         <ha-relative-time
@@ -61,6 +62,11 @@ class MoreInfoAutomation extends LitElement {
         flex-wrap: wrap;
         justify-content: center;
       }
+      hr {
+        border-color: var(--divider-color);
+        border-bottom: none;
+        margin: 16px 0;
+      }
     `;
   }
 }

src/dialogs/more-info/controls/more-info-light.ts

@@ -102,7 +102,7 @@ class MoreInfoLight extends LitElement {
           : ""}
         ${this.stateObj.state === "on"
           ? html`
-              ${supportsTemp || supportsColor ? html`<hr></hr>` : ""}
+              ${supportsTemp || supportsColor ? html`<hr />` : ""}
               ${supportsTemp && supportsColor
                 ? html`<ha-button-toggle-group
                     fullWidth
@@ -205,7 +205,7 @@ class MoreInfoLight extends LitElement {
               ${supportsFeature(this.stateObj, SUPPORT_EFFECT) &&
               this.stateObj!.attributes.effect_list?.length
                 ? html`
-                    <hr></hr>
+                    <hr />
                     <ha-paper-dropdown-menu
                       .label=${this.hass.localize("ui.card.light.effect")}
                     >
@@ -560,7 +560,7 @@ class MoreInfoLight extends LitElement {
       }
 
       ha-button-toggle-group {
-        margin: 8px 0px;
+        margin-bottom: 8px;
       }
 
       ha-color-picker {
@@ -585,7 +585,7 @@ class MoreInfoLight extends LitElement {
       hr {
         border-color: var(--divider-color);
         border-bottom: none;
-        margin: 8px 0;
+        margin: 16px 0;
       }
     `;
   }

src/dialogs/more-info/controls/more-info-script.ts

@@ -23,6 +23,7 @@ class MoreInfoScript extends LitElement {
     }
 
     return html`
+      <hr />
       <div class="flex">
         <div>
           ${this.hass.localize(
@@ -47,6 +48,11 @@ class MoreInfoScript extends LitElement {
         display: flex;
         justify-content: space-between;
       }
+      hr {
+        border-color: var(--divider-color);
+        border-bottom: none;
+        margin: 16px 0;
+      }
     `;
   }
 }

src/dialogs/more-info/controls/more-info-sun.ts

@@ -29,6 +29,7 @@ class MoreInfoSun extends LitElement {
     const order = risingDate > settingDate ? ["set", "ris"] : ["ris", "set"];
 
     return html`
+      <hr />
       ${order.map(
         (item) => html`
           <div class="row">
@@ -82,6 +83,11 @@ class MoreInfoSun extends LitElement {
       ha-relative-time::first-letter {
         text-transform: lowercase;
       }
+      hr {
+        border-color: var(--divider-color);
+        border-bottom: none;
+        margin: 16px 0;
+      }
     `;
   }
 }

src/dialogs/more-info/controls/more-info-water_heater.js

@@ -50,7 +50,6 @@ class MoreInfoWaterHeater extends LocalizeMixin(EventsMixin(PolymerElement)) {
         .single-row {
           padding: 8px 0;
         }
-        }
       </style>
 
       <div class$="[[computeClassNames(stateObj)]]">