From eb220fa1a00900c0f343948fa2c59bf2c0a819f8 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Wed, 17 May 2023 16:23:30 +0200
Subject: [PATCH] Fix overflow menu being above dialogs (#16558)

Fix device actions being above dialogs
---
 src/components/ha-dialog.ts                   |  2 +-
 .../media-player/dialog-media-manage.ts       |  2 +-
 .../dialog-media-player-browse.ts             |  2 +-
 src/dialogs/quick-bar/ha-quick-bar.ts         |  2 +-
 .../config/devices/ha-config-device-page.ts   | 88 +++++++++----------
 5 files changed, 48 insertions(+), 48 deletions(-)

diff --git a/src/components/ha-dialog.ts b/src/components/ha-dialog.ts
index b6ce255eeb..5ecff68570 100644
--- a/src/components/ha-dialog.ts
+++ b/src/components/ha-dialog.ts
@@ -72,7 +72,7 @@ export class HaDialog extends DialogBase {
           --dialog-scroll-divider-color,
           var(--divider-color)
         );
-        z-index: var(--dialog-z-index, 7);
+        z-index: var(--dialog-z-index, 8);
         -webkit-backdrop-filter: var(--dialog-backdrop-filter, none);
         backdrop-filter: var(--dialog-backdrop-filter, none);
         --mdc-dialog-box-shadow: var(--dialog-box-shadow, none);
diff --git a/src/components/media-player/dialog-media-manage.ts b/src/components/media-player/dialog-media-manage.ts
index 684187dfa5..c0acc30685 100644
--- a/src/components/media-player/dialog-media-manage.ts
+++ b/src/components/media-player/dialog-media-manage.ts
@@ -277,7 +277,7 @@ class DialogMediaManage extends LitElement {
       haStyleDialog,
       css`
         ha-dialog {
-          --dialog-z-index: 8;
+          --dialog-z-index: 9;
           --dialog-content-padding: 0;
         }
 
diff --git a/src/components/media-player/dialog-media-player-browse.ts b/src/components/media-player/dialog-media-player-browse.ts
index dd51190b43..a67bf5366a 100644
--- a/src/components/media-player/dialog-media-player-browse.ts
+++ b/src/components/media-player/dialog-media-player-browse.ts
@@ -142,7 +142,7 @@ class DialogMediaPlayerBrowse extends LitElement {
       haStyleDialog,
       css`
         ha-dialog {
-          --dialog-z-index: 8;
+          --dialog-z-index: 9;
           --dialog-content-padding: 0;
         }
 
diff --git a/src/dialogs/quick-bar/ha-quick-bar.ts b/src/dialogs/quick-bar/ha-quick-bar.ts
index bb1902e7dd..30abaf7de3 100644
--- a/src/dialogs/quick-bar/ha-quick-bar.ts
+++ b/src/dialogs/quick-bar/ha-quick-bar.ts
@@ -775,7 +775,7 @@ export class QuickBar extends LitElement {
         }
 
         ha-dialog {
-          --dialog-z-index: 8;
+          --dialog-z-index: 9;
           --dialog-content-padding: 0;
         }
 
diff --git a/src/panels/config/devices/ha-config-device-page.ts b/src/panels/config/devices/ha-config-device-page.ts
index afd74a41b1..3c3cd8568c 100644
--- a/src/panels/config/devices/ha-config-device-page.ts
+++ b/src/panels/config/devices/ha-config-device-page.ts
@@ -755,52 +755,52 @@ export class HaConfigDevicePage extends LitElement {
                                     )}
                                     .path=${mdiDotsVertical}
                                   ></ha-icon-button>
-                                  ${actions.map(
-                                    (deviceAction) => html`
-                                      <a
-                                        href=${ifDefined(deviceAction.href)}
-                                        target=${ifDefined(deviceAction.target)}
-                                        rel=${ifDefined(
-                                          deviceAction.target
-                                            ? "noreferrer"
-                                            : undefined
-                                        )}
-                                      >
-                                        <mwc-list-item
-                                          class=${ifDefined(
-                                            deviceAction.classes
+                                  ${actions.map((deviceAction) => {
+                                    const listItem = html`<mwc-list-item
+                                      class=${ifDefined(deviceAction.classes)}
+                                      .action=${deviceAction.action}
+                                      @click=${this._deviceActionClicked}
+                                      graphic="icon"
+                                      .hasMeta=${Boolean(
+                                        deviceAction.trailingIcon
+                                      )}
+                                    >
+                                      ${deviceAction.label}
+                                      ${deviceAction.icon
+                                        ? html`
+                                            <ha-svg-icon
+                                              class=${ifDefined(
+                                                deviceAction.classes
+                                              )}
+                                              .path=${deviceAction.icon}
+                                              slot="graphic"
+                                            ></ha-svg-icon>
+                                          `
+                                        : ""}
+                                      ${deviceAction.trailingIcon
+                                        ? html`
+                                            <ha-svg-icon
+                                              slot="meta"
+                                              .path=${deviceAction.trailingIcon}
+                                            ></ha-svg-icon>
+                                          `
+                                        : ""}
+                                    </mwc-list-item>`;
+                                    return deviceAction.href
+                                      ? html`<a
+                                          href=${deviceAction.href}
+                                          target=${ifDefined(
+                                            deviceAction.target
                                           )}
-                                          .action=${deviceAction.action}
-                                          @click=${this._deviceActionClicked}
-                                          graphic="icon"
-                                          .hasMeta=${Boolean(
-                                            deviceAction.trailingIcon
+                                          rel=${ifDefined(
+                                            deviceAction.target
+                                              ? "noreferrer"
+                                              : undefined
                                           )}
-                                        >
-                                          ${deviceAction.label}
-                                          ${deviceAction.icon
-                                            ? html`
-                                                <ha-svg-icon
-                                                  class=${ifDefined(
-                                                    deviceAction.classes
-                                                  )}
-                                                  .path=${deviceAction.icon}
-                                                  slot="graphic"
-                                                ></ha-svg-icon>
-                                              `
-                                            : ""}
-                                          ${deviceAction.trailingIcon
-                                            ? html`
-                                                <ha-svg-icon
-                                                  slot="meta"
-                                                  .path=${deviceAction.trailingIcon}
-                                                ></ha-svg-icon>
-                                              `
-                                            : ""}
-                                        </mwc-list-item>
-                                      </a>
-                                    `
-                                  )}
+                                          >${listItem}
+                                        </a>`
+                                      : listItem;
+                                  })}
                                 </ha-button-menu>
                               `
                             : ""}