Fix visibility for shown entities on device card

src/panels/config/devices/device-detail/ha-device-entities-card.ts

@@ -6,6 +6,7 @@ import {
   LitElement,
   PropertyValues,
   TemplateResult,
+  nothing
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { until } from "lit/directives/until";
@@ -92,15 +93,19 @@ export class HaDeviceEntitiesCard extends LitElement {
 
     return html`
       <ha-card outlined .header=${this.header}>
-        <div id="entities">
-          <mwc-list>
-            ${shownEntities.map((entry) =>
-              this.hass.states[entry.entity_id]
-                ? this._renderEntity(entry)
-                : this._renderEntry(entry)
-            )}
-          </mwc-list>
-        </div>
+        ${shownEntities.length
+          ? html`
+              <div id="entities">
+                <mwc-list>
+                  ${shownEntities.map((entry) =>
+                    this.hass.states[entry.entity_id]
+                      ? this._renderEntity(entry)
+                      : this._renderEntry(entry)
+                  )}
+                </mwc-list>
+              </div>
+            `
+          : nothing}
         ${hiddenEntities.length
           ? !this.showHidden
             ? html`
@@ -121,7 +126,7 @@ export class HaDeviceEntitiesCard extends LitElement {
                   )}
                 </button>
               `
-          : ""}
+          : nothing}
         <div class="card-actions">
           <mwc-button @click=${this._addToLovelaceView}>
             ${this.hass.localize(
@@ -303,6 +308,13 @@ export class HaDeviceEntitiesCard extends LitElement {
         outline: none;
         text-decoration: underline;
       }
+      mwc-list:has(.disabled-entry) {
+        --mdc-list-vertical-padding: 0;
+        margin-top: -8px;
+      }
+      #entities + mwc-list:has(.disabled-entry) {
+        margin-top: 8px;
+      }
       ha-list-item {
         height: 40px;
       }