More info breadcrumb clickable (#24830)

* Make more info breadcrum clickable

* css adjustements

src/components/ha-related-items.ts

@@ -211,36 +211,12 @@ export class HaRelatedItems extends LitElement {
                 )}
             </mwc-list>`
         : nothing}
-      ${this._related.device
-        ? html`<h3>
-              ${this.hass.localize("ui.components.related-items.device")}
-            </h3>
-            ${this._related.device.map((relatedDeviceId) => {
-              const device = this.hass.devices[relatedDeviceId];
-              if (!device) {
-                return nothing;
-              }
-              return html`
-                <a href="/config/devices/device/${relatedDeviceId}">
-                  <ha-list-item hasMeta graphic="icon">
-                    <ha-svg-icon
-                      .path=${mdiDevices}
-                      slot="graphic"
-                    ></ha-svg-icon>
-                    ${device.name_by_user || device.name}
-                    <ha-icon-next slot="meta"></ha-icon-next>
-                  </ha-list-item>
-                </a>
-              `;
-            })}            </mwc-list>
-            `
-        : nothing}
       ${this._related.area
         ? html`<h3>
               ${this.hass.localize("ui.components.related-items.area")}
             </h3>
-            <mwc-list
+            <mwc-list>
-              >${this._related.area.map((relatedAreaId) => {
+              ${this._related.area.map((relatedAreaId) => {
                 const area = this.hass.areas[relatedAreaId];
                 if (!area) {
                   return nothing;
@@ -268,8 +244,33 @@ export class HaRelatedItems extends LitElement {
                     </ha-list-item>
                   </a>
                 `;
-              })}</mwc-list
+              })}
-            >`
+            </mwc-list>`
+        : nothing}
+      ${this._related.device
+        ? html`<h3>
+              ${this.hass.localize("ui.components.related-items.device")}
+            </h3>
+            <mwc-list>
+              ${this._related.device.map((relatedDeviceId) => {
+                const device = this.hass.devices[relatedDeviceId];
+                if (!device) {
+                  return nothing;
+                }
+                return html`
+                  <a href="/config/devices/device/${relatedDeviceId}">
+                    <ha-list-item hasMeta graphic="icon">
+                      <ha-svg-icon
+                        .path=${mdiDevices}
+                        slot="graphic"
+                      ></ha-svg-icon>
+                      ${device.name_by_user || device.name}
+                      <ha-icon-next slot="meta"></ha-icon-next>
+                    </ha-list-item>
+                  </a>
+                `;
+              })}
+            </mwc-list>`
         : nothing}
       ${this._related.entity
         ? html`

src/dialogs/more-info/ha-more-info-dialog.ts

@@ -276,6 +276,11 @@ export class MoreInfoDialog extends LitElement {
     this._setView("related");
   }
 
+  private _breadcrumbClick(ev: Event) {
+    ev.stopPropagation();
+    this._setView("related");
+  }
+
   private async _loadNumericDeviceClasses() {
     const deviceClasses = await getSensorNumericDeviceClasses(this.hass);
     this._sensorNumericDeviceClasses = deviceClasses.numeric_device_classes;
@@ -350,17 +355,16 @@ export class MoreInfoDialog extends LitElement {
                   )}
                 ></ha-icon-button-prev>
               `}
-          <span
+          <span slot="title" @click=${this._enlarge} class="title">
-            slot="title"
-            .title=${title}
-            @click=${this._enlarge}
-            class="title"
-          >
             ${breadcrumb.length > 0
               ? html`
-                  <p class="breadcrumb">
+                  <button
+                    class="breadcrumb"
+                    @click=${this._breadcrumbClick}
+                    aria-label=${breadcrumb.join(" > ")}
+                  >
                     ${join(breadcrumb, html`<ha-icon-next></ha-icon-next>`)}
-                  </p>
+                  </button>
                 `
               : nothing}
             <p class="main">${title}</p>
@@ -656,6 +660,7 @@ export class MoreInfoDialog extends LitElement {
         .title {
           display: flex;
           flex-direction: column;
+          align-items: flex-start;
         }
 
         .title p {
@@ -676,11 +681,22 @@ export class MoreInfoDialog extends LitElement {
           color: var(--secondary-text-color);
           font-size: 14px;
           line-height: 16px;
-          margin-top: -6px;
+          --mdc-icon-size: 16px;
+          padding: 4px;
+          margin: -4px;
+          margin-top: -10px;
+          background: none;
+          border: none;
+          cursor: pointer;
+          outline: none;
+          display: inline-flex;
+          border-radius: 6px;
+          transition: background-color 180ms ease-in-out;
         }
 
-        .title .breadcrumb {
+        .title .breadcrumb:focus-visible,
-          --mdc-icon-size: 16px;
+        .title .breadcrumb:hover {
+          background-color: rgba(var(--rgb-secondary-text-color), 0.08);
         }
       `,
     ];