From 29a116778291969948c691ce2ef6abcfb2bc15b6 Mon Sep 17 00:00:00 2001
From: Philip Allgaier <mail@spacegaier.de>
Date: Tue, 26 Oct 2021 11:12:27 +0200
Subject: [PATCH] Ensure consistent card look on device config page (#10386)

---
 .../device-detail/ha-device-entities-card.ts  | 12 +++++++++--
 .../config/devices/ha-config-device-page.ts   | 20 ++++++-------------
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/panels/config/devices/device-detail/ha-device-entities-card.ts b/src/panels/config/devices/device-detail/ha-device-entities-card.ts
index 5c749d927b..560816b0d4 100644
--- a/src/panels/config/devices/device-detail/ha-device-entities-card.ts
+++ b/src/panels/config/devices/device-detail/ha-device-entities-card.ts
@@ -148,7 +148,11 @@ export class HaDeviceEntitiesCard extends LitElement {
 
   private _renderEntry(entry: EntityRegistryStateEntry): TemplateResult {
     return html`
-      <paper-icon-item .entry=${entry} @click=${this._openEditEntry}>
+      <paper-icon-item
+        class="disabled-entry"
+        .entry=${entry}
+        @click=${this._openEditEntry}
+      >
         <ha-svg-icon
           slot="item-icon"
           .path=${domainIcon(computeDomain(entry.entity_id))}
@@ -205,6 +209,9 @@ export class HaDeviceEntitiesCard extends LitElement {
       .disabled-entry {
         color: var(--secondary-text-color);
       }
+      #entities {
+        margin-top: -24px; /* match the spacing between card title and content of the device info card above it */
+      }
       #entities > * {
         margin: 8px 16px 8px 8px;
       }
@@ -213,8 +220,9 @@ export class HaDeviceEntitiesCard extends LitElement {
       }
       paper-icon-item {
         min-height: 40px;
-        padding: 0 8px;
+        padding: 0 16px;
         cursor: pointer;
+        --paper-item-icon-width: 48px;
       }
       .name {
         font-size: 14px;
diff --git a/src/panels/config/devices/ha-config-device-page.ts b/src/panels/config/devices/ha-config-device-page.ts
index f1b6c60837..4b53f95ceb 100644
--- a/src/panels/config/devices/ha-config-device-page.ts
+++ b/src/panels/config/devices/ha-config-device-page.ts
@@ -420,7 +420,7 @@ export class HaConfigDevicePage extends LitElement {
                               : "";
                           })
                         : html`
-                            <paper-item class="no-link">
+                            <div class="card-content">
                               ${this.hass.localize(
                                 "ui.panel.config.devices.add_prompt",
                                 "name",
@@ -428,7 +428,7 @@ export class HaConfigDevicePage extends LitElement {
                                   "ui.panel.config.devices.automation.automations"
                                 )
                               )}
-                            </paper-item>
+                            </div>
                           `}
                     </ha-card>
                   `
@@ -502,7 +502,7 @@ export class HaConfigDevicePage extends LitElement {
                                   : "";
                               })
                             : html`
-                                <paper-item class="no-link">
+                                <div class="card-content">
                                   ${this.hass.localize(
                                     "ui.panel.config.devices.add_prompt",
                                     "name",
@@ -510,7 +510,7 @@ export class HaConfigDevicePage extends LitElement {
                                       "ui.panel.config.devices.scene.scenes"
                                     )
                                   )}
-                                </paper-item>
+                                </div>
                               `
                         }
                       </ha-card>
@@ -558,7 +558,7 @@ export class HaConfigDevicePage extends LitElement {
                                 : "";
                             })
                           : html`
-                              <paper-item class="no-link">
+                              <div class="card-content">
                                 ${this.hass.localize(
                                   "ui.panel.config.devices.add_prompt",
                                   "name",
@@ -566,7 +566,7 @@ export class HaConfigDevicePage extends LitElement {
                                     "ui.panel.config.devices.script.scripts"
                                   )
                                 )}
-                              </paper-item>
+                              </div>
                             `}
                       </ha-card>
                     `
@@ -953,19 +953,11 @@ export class HaConfigDevicePage extends LitElement {
           font-size: var(--paper-font-body1_-_font-size);
         }
 
-        paper-item.no-link {
-          cursor: default;
-        }
-
         a {
           text-decoration: none;
           color: var(--primary-color);
         }
 
-        ha-card {
-          padding-bottom: 8px;
-        }
-
         ha-card a {
           color: var(--primary-text-color);
         }