Fixes for integration cards (#8930)

gallery/src/demos/demo-integration-card.ts

@@ -139,9 +139,9 @@ const configEntries: Array<{
   {
     items: [
       loadedEntry,
-      longNameEntry,
       setupErrorEntry,
       migrationErrorEntry,
+      longNameEntry,
       setupRetryEntry,
       failedUnloadEntry,
       notLoadedEntry,
@@ -211,6 +211,7 @@ export class DemoIntegrationCard extends LitElement {
       return html``;
     }
     return html`
+      <div class="container">
         <div class="filters">
           <ha-formfield label="Custom Integration">
             <ha-switch @change=${this._toggleCustomIntegration}></ha-switch>
@@ -231,7 +232,10 @@ export class DemoIntegrationCard extends LitElement {
             <ha-config-flow-card
               .hass=${this.hass}
               .flow=${flow}
-            .manifest=${createManifest(this.isCustomIntegration, this.isCloud)}
+              .manifest=${createManifest(
+                this.isCustomIntegration,
+                this.isCloud
+              )}
             ></ha-config-flow-card>
           `
         )}
@@ -244,14 +248,40 @@ export class DemoIntegrationCard extends LitElement {
               .hass=${this.hass}
               domain="esphome"
               .items=${info.items}
-            .manifest=${createManifest(this.isCustomIntegration, this.isCloud)}
-            .entityRegistryEntries=${createEntityRegistryEntries(info.items[0])}
-            .deviceRegistryEntries=${createDeviceRegistryEntries(info.items[0])}
+              .manifest=${createManifest(
+                this.isCustomIntegration,
+                this.isCloud
+              )}
+              .entityRegistryEntries=${createEntityRegistryEntries(
+                info.items[0]
+              )}
+              .deviceRegistryEntries=${createDeviceRegistryEntries(
+                info.items[0]
+              )}
               ?disabled=${info.disabled}
               .selectedConfigEntryId=${info.highlight}
             ></ha-integration-card>
           `
         )}
+      </div>
+      <div class="container">
+        <!-- One that is standalone to see how it increases height if height
+           not defined by other cards. -->
+        <ha-integration-card
+          .hass=${this.hass}
+          domain="esphome"
+          .items=${[
+            loadedEntry,
+            setupErrorEntry,
+            migrationErrorEntry,
+            setupRetryEntry,
+            failedUnloadEntry,
+          ]}
+          .manifest=${createManifest(this.isCustomIntegration, this.isCloud)}
+          .entityRegistryEntries=${createEntityRegistryEntries(loadedEntry)}
+          .deviceRegistryEntries=${createDeviceRegistryEntries(loadedEntry)}
+        ></ha-integration-card>
+      </div>
     `;
   }
 
@@ -272,7 +302,7 @@ export class DemoIntegrationCard extends LitElement {
 
   static get styles() {
     return css`
-      :host {
+      .container {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
         grid-gap: 16px 16px;
@@ -280,7 +310,7 @@ export class DemoIntegrationCard extends LitElement {
         margin-bottom: 64px;
       }
 
-      :host > * {
+      .container > * {
         max-width: 500px;
       }
 

src/panels/config/integrations/ha-integration-card.ts

@@ -49,7 +49,6 @@ import {
 } from "./ha-config-integrations-common";
 
 const ERROR_STATES: ConfigEntry["state"][] = [
-  "failed_unload",
   "migration_error",
   "setup_error",
   "setup_retry",
@@ -116,6 +115,7 @@ export class HaIntegrationCard extends LitElement {
           hasMultiple: this.items.length > 1,
           disabled: this.disabled,
           "state-not-loaded": hasItem && item!.state === "not_loaded",
+          "state-failed-unload": hasItem && item!.state === "failed_unload",
           "state-error": hasItem && ERROR_STATES.includes(item!.state),
         })}"
         .configEntry=${item}
@@ -619,6 +619,10 @@ export class HaIntegrationCard extends LitElement {
           --state-color: var(--error-color);
           --text-on-state-color: var(--text-primary-color);
         }
+        .state-failed-unload {
+          --state-color: var(--warning-color);
+          --text-on-state-color: var(--primary-text-color);
+        }
         .state-not-loaded {
           --state-message-color: var(--primary-text-color);
         }
@@ -626,9 +630,6 @@ export class HaIntegrationCard extends LitElement {
           --state-color: var(--accent-color);
           --text-on-state-color: var(--text-primary-color);
         }
-        ha-card.group {
-          max-height: 200px;
-        }
 
         .back-btn {
           background-color: var(--state-color);
@@ -650,9 +651,6 @@ export class HaIntegrationCard extends LitElement {
           align-items: center;
           padding: 16px 8px 8px 16px;
         }
-        .group.disabled .header {
-          padding-top: 8px;
-        }
         .header img {
           margin-right: 16px;
           width: 40px;
@@ -706,10 +704,21 @@ export class HaIntegrationCard extends LitElement {
           --mdc-menu-min-width: 200px;
         }
         @media (min-width: 563px) {
+          ha-card.group {
+            position: relative;
+            min-height: 164px;
+          }
           paper-listbox {
-            flex: 1;
+            position: absolute;
+            top: 64px;
+            left: 0;
+            right: 0;
+            bottom: 0;
             overflow: auto;
           }
+          .disabled paper-listbox {
+            top: 100px;
+          }
         }
         paper-item {
           cursor: pointer;