Update layout of hardware info (#18034)

src/components/ha-clickable-list-item.ts

@@ -41,8 +41,6 @@ export class HaClickableListItem extends HaListItem {
           height: 100%;
           display: flex;
           align-items: center;
-          padding-left: var(--mdc-list-side-padding, 20px);
-          padding-right: var(--mdc-list-side-padding, 20px);
           overflow: hidden;
         }
       `,

src/panels/config/hardware/ha-config-hardware.ts

@@ -5,7 +5,6 @@ import type { ChartOptions } from "chart.js";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { css, html, LitElement, nothing, PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { ifDefined } from "lit/directives/if-defined";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { numberFormatToLocale } from "../../../common/number/format_number";
 import { round } from "../../../common/number/round";
@@ -283,53 +282,43 @@ class HaConfigHardware extends SubscribeMixin(LitElement) {
             ? html`
                 <ha-card outlined>
                   <div class="card-content">
-                    <mwc-list>
+                    ${imageURL ? html`<img alt="" src=${imageURL} />` : ""}
-                      <ha-list-item
+                    <div class="board-info">
-                        noninteractive
+                      <p class="primary-text">
-                        graphic=${ifDefined(imageURL ? "medium" : undefined)}
+                        ${boardName ||
-                        .twoline=${Boolean(boardId)}
+                        this.hass.localize(
-                      >
+                          "ui.panel.config.hardware.generic_hardware"
-                        ${imageURL
+                        )}
-                          ? html`<img alt="" slot="graphic" src=${imageURL} />`
+                      </p>
-                          : ""}
+                      ${boardId
-                        <span class="primary-text">
+                        ? html`<p class="secondary-text">${boardId}</p>`
-                          ${boardName ||
-                          this.hass.localize(
-                            "ui.panel.config.hardware.generic_hardware"
-                          )}
-                        </span>
-                        ${boardId
-                          ? html`
-                              <span class="secondary-text" slot="secondary"
-                                >${boardId}</span
-                              >
-                            `
-                          : ""}
-                      </ha-list-item>
-                      ${documentationURL
-                        ? html`
-                            <ha-clickable-list-item
-                              .href=${documentationURL}
-                              openNewTab
-                              twoline
-                              hasMeta
-                            >
-                              <span
-                                >${this.hass.localize(
-                                  "ui.panel.config.hardware.documentation"
-                                )}</span
-                              >
-                              <span slot="secondary"
-                                >${this.hass.localize(
-                                  "ui.panel.config.hardware.documentation_description"
-                                )}</span
-                              >
-                              <ha-icon-next slot="meta"></ha-icon-next>
-                            </ha-clickable-list-item>
-                          `
                         : ""}
-                    </mwc-list>
+                    </div>
                   </div>
+                  ${documentationURL
+                    ? html`
+                        <mwc-list>
+                          <ha-clickable-list-item
+                            .href=${documentationURL}
+                            openNewTab
+                            twoline
+                            hasMeta
+                          >
+                            <span
+                              >${this.hass.localize(
+                                "ui.panel.config.hardware.documentation"
+                              )}</span
+                            >
+                            <span slot="secondary"
+                              >${this.hass.localize(
+                                "ui.panel.config.hardware.documentation_description"
+                              )}</span
+                            >
+                            <ha-icon-next slot="meta"></ha-icon-next>
+                          </ha-clickable-list-item>
+                        </mwc-list>
+                      `
+                    : ""}
                   ${boardConfigEntries.length ||
                   isComponentLoaded(this.hass, "hassio")
                     ? html`<div class="card-actions">
@@ -500,6 +489,8 @@ class HaConfigHardware extends SubscribeMixin(LitElement) {
         padding: 28px 20px 0;
         max-width: 1040px;
         margin: 0 auto;
+        --mdc-list-side-padding: 24px;
+        --mdc-list-vertical-padding: 0;
       }
       ha-card {
         max-width: 600px;
@@ -516,12 +507,21 @@ class HaConfigHardware extends SubscribeMixin(LitElement) {
         flex-direction: column;
         padding: 16px;
       }
-
+      .card-content img {
+        max-width: 300px;
+        margin: auto;
+      }
+      .board-info {
+        text-align: center;
+      }
       .primary-text {
         font-size: 16px;
+        margin: 0;
       }
       .secondary-text {
         font-size: 14px;
+        margin-bottom: 0;
+        color: var(--secondary-text-color);
       }
 
       .header {