Integrations header: center warning/error text (#17141)

Co-authored-by: Paul Bottein <paul.bottein@gmail.com>

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

@@ -77,10 +77,13 @@ export class HaIntegrationActionCard extends LitElement {
         font-weight: 400;
         margin-top: 8px;
         margin-bottom: 0;
+        max-width: 100%;
       }
       h3 {
         font-size: 14px;
         margin: 0;
+        max-width: 100%;
+        text-align: center;
       }
       .header-button {
         position: absolute;

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

@@ -24,8 +24,6 @@ import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
 import { computeRTL } from "../../../common/util/compute_rtl";
 import "../../../components/ha-card";
-import "../../../components/ha-icon-next";
-import "../../../components/ha-list-item";
 import "../../../components/ha-svg-icon";
 import { ConfigEntry, ERROR_STATES } from "../../../data/config_entries";
 import type { DeviceRegistryEntry } from "../../../data/device_registry";
@@ -114,12 +112,6 @@ export class HaIntegrationCard extends LitElement {
               : undefined}
             .manifest=${this.manifest}
           >
-            <ha-icon-next
-              slot="header-button"
-              .label=${this.hass.localize(
-                "ui.panel.config.integrations.config_entry.configure"
-              )}
-            ></ha-icon-next>
           </ha-integration-header>
         </a>
 
@@ -345,9 +337,6 @@ export class HaIntegrationCard extends LitElement {
           text-decoration: none;
           color: var(--primary-text-color);
         }
-        a ha-icon-next {
-          color: var(--secondary-text-color);
-        }
         .icons {
           display: flex;
         }

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

@@ -1,6 +1,7 @@
 import { mdiAlertCircleOutline, mdiAlertOutline } from "@mdi/js";
 import { LitElement, TemplateResult, css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
+import "../../../components/ha-icon-next";
 import "../../../components/ha-svg-icon";
 import { IntegrationManifest, domainToName } from "../../../data/integration";
 import { HomeAssistant } from "../../../types";
@@ -40,27 +41,34 @@ export class HaIntegrationHeader extends LitElement {
         />
         <div class="info">
           <div
-            class="primary ${this.warning || this.error ? "hasError" : ""}"
+            class="primary ${this.warning || this.error ? "has-secondary" : ""}"
             role="heading"
             aria-level="1"
           >
             ${domainName}
           </div>
           ${this.error
-            ? html`<div class="error">
-                <ha-svg-icon .path=${mdiAlertCircleOutline}></ha-svg-icon>${this
-                  .error}
-              </div>`
+            ? html`
+                <div class="secondary error">
+                  <ha-svg-icon .path=${mdiAlertCircleOutline}></ha-svg-icon>
+                  <span>${this.error}</span>
+                </div>
+              `
             : this.warning
-            ? html`<div class="warning">
-                <ha-svg-icon .path=${mdiAlertOutline}></ha-svg-icon>${this
-                  .warning}
-              </div>`
+            ? html`
+                <div class="secondary warning">
+                  <ha-svg-icon .path=${mdiAlertOutline}></ha-svg-icon>
+                  <span>${this.warning}</span>
+                </div>
+              `
             : nothing}
         </div>
-        <div class="header-button">
-          <slot name="header-button"></slot>
-        </div>
+        <ha-icon-next
+          class="header-button"
+          .label=${this.hass.localize(
+            "ui.panel.config.integrations.config_entry.configure"
+          )}
+        ></ha-icon-next>
       </div>
     `;
   }
@@ -76,12 +84,15 @@ export class HaIntegrationHeader extends LitElement {
   static styles = css`
     .header {
       display: flex;
+      align-items: center;
       position: relative;
       padding-top: 16px;
       padding-bottom: 16px;
       padding-inline-start: 16px;
       padding-inline-end: 8px;
       direction: var(--direction);
+      box-sizing: border-box;
+      min-width: 0;
     }
     .header img {
       margin-inline-start: initial;
@@ -91,50 +102,55 @@ export class HaIntegrationHeader extends LitElement {
       direction: var(--direction);
     }
     .header .info {
+      position: relative;
+      display: flex;
+      flex-direction: column;
       flex: 1;
       align-self: center;
+      min-width: 0;
     }
-    .primary,
-    .warning,
-    .error {
-      word-wrap: break-word;
-      display: -webkit-box;
-      -webkit-box-orient: vertical;
-      overflow: hidden;
-      text-overflow: ellipsis;
+    ha-icon-next {
+      color: var(--secondary-text-color);
     }
     .primary {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
       font-size: 16px;
       font-weight: 400;
-      word-break: break-word;
       color: var(--primary-text-color);
-      -webkit-line-clamp: 2;
     }
-    .hasError {
+    .has-secondary {
       -webkit-line-clamp: 1;
       font-size: 14px;
     }
-    .warning,
-    .error {
-      line-height: 20px;
+    .secondary {
+      min-width: 0;
       --mdc-icon-size: 20px;
       -webkit-line-clamp: 1;
-      font-size: 0.9em;
+      font-size: 12px;
+      display: flex;
+      flex-direction: row;
+    }
+    .secondary > span {
+      position: relative;
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .secondary > ha-svg-icon {
+      margin-right: 4px;
+      flex-shrink: 0;
     }
     .error ha-svg-icon {
-      margin-right: 4px;
       color: var(--error-color);
     }
     .warning ha-svg-icon {
-      margin-right: 4px;
       color: var(--warning-color);
     }
-    .header-button {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 36px;
-    }
   `;
 }