From 07b3f26e085eefdb65a3a01d186d09ae7f28a9ab Mon Sep 17 00:00:00 2001
From: James Morris <moreofmorris@users.noreply.github.com>
Date: Wed, 11 May 2022 14:32:55 +0100
Subject: [PATCH] Fixed z-indexing that messed with some dropdowns and fixed
 the extra long widths on others

refs: https://github.com/TryGhost/Team/issues/1531
---
 .../app/components/dashboard/v5/charts/anchor.hbs      |  4 ++--
 .../app/components/dashboard/v5/charts/engagement.hbs  |  2 +-
 .../app/components/dashboard/v5/charts/paid-mix.hbs    |  2 +-
 ghost/admin/app/styles/layouts/dashboard-v5.css        | 10 ++++++++++
 4 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/ghost/admin/app/components/dashboard/v5/charts/anchor.hbs b/ghost/admin/app/components/dashboard/v5/charts/anchor.hbs
index 255b8fd670..9c8f5bf6e7 100644
--- a/ghost/admin/app/components/dashboard/v5/charts/anchor.hbs
+++ b/ghost/admin/app/components/dashboard/v5/charts/anchor.hbs
@@ -9,7 +9,7 @@
                     @onChange={{this.onDisplayChange}}
                     @triggerComponent="gh-power-select/trigger"
                     @triggerClass="gh-contentfilter-menu-trigger"
-                    @dropdownClass="gh-contentfilter-menu-dropdown"
+                    @dropdownClass="gh-contentfilter-menu-dropdown is-narrow"
                     @matchTriggerWidth={{false}}
                     as |option|
                 >
@@ -75,7 +75,7 @@
                 @onChange={{this.onDaysChange}}
                 @triggerComponent="gh-power-select/trigger"
                 @triggerClass="gh-contentfilter-menu-trigger"
-                @dropdownClass="gh-contentfilter-menu-dropdown"
+                @dropdownClass="gh-contentfilter-menu-dropdown is-narrow"
                 @matchTriggerWidth={{false}}
                 as |option|
             >
diff --git a/ghost/admin/app/components/dashboard/v5/charts/engagement.hbs b/ghost/admin/app/components/dashboard/v5/charts/engagement.hbs
index 7bef090609..0d5cd34c50 100644
--- a/ghost/admin/app/components/dashboard/v5/charts/engagement.hbs
+++ b/ghost/admin/app/components/dashboard/v5/charts/engagement.hbs
@@ -37,7 +37,7 @@
                 @onChange={{this.onSwitchStatus}}
                 @triggerComponent="gh-power-select/trigger"
                 @triggerClass="gh-contentfilter-menu-trigger"
-                @dropdownClass="gh-contentfilter-menu-dropdown"
+                @dropdownClass="gh-contentfilter-menu-dropdown is-narrow"
                 @matchTriggerWidth={{false}}
                 as |option|
             >
diff --git a/ghost/admin/app/components/dashboard/v5/charts/paid-mix.hbs b/ghost/admin/app/components/dashboard/v5/charts/paid-mix.hbs
index 0ed7ae07bc..ef2781cd23 100644
--- a/ghost/admin/app/components/dashboard/v5/charts/paid-mix.hbs
+++ b/ghost/admin/app/components/dashboard/v5/charts/paid-mix.hbs
@@ -44,7 +44,7 @@
                 @onChange={{this.onSwitchMode}}
                 @triggerComponent="gh-power-select/trigger"
                 @triggerClass="gh-contentfilter-menu-trigger"
-                @dropdownClass="gh-contentfilter-menu-dropdown"
+                @dropdownClass="gh-contentfilter-menu-dropdown is-narrow"
                 @matchTriggerWidth={{false}}
                 as |option|
             >
diff --git a/ghost/admin/app/styles/layouts/dashboard-v5.css b/ghost/admin/app/styles/layouts/dashboard-v5.css
index 6055bafeae..38961742c0 100644
--- a/ghost/admin/app/styles/layouts/dashboard-v5.css
+++ b/ghost/admin/app/styles/layouts/dashboard-v5.css
@@ -351,6 +351,7 @@ Dashboard v5 Layout */
     position: absolute;
     top: 14px;
     right: 4px;
+    z-index: 99;
 }
 
 .gh-dashboard5-select .gh-dashboard5-select {
@@ -367,10 +368,19 @@ Dashboard v5 Layout */
     white-space: nowrap;
 }
 
+.gh-contentfilter-menu-dropdown.is-narrow {
+    width: auto;
+}
+
+.gh-contentfilter-menu-dropdown.is-narrow .ember-power-select-option {
+    padding-right: 32px;
+}
+
 .gh-dashboard5-select-title {
     display: flex;
     justify-content: flex-start;
     margin: -12px 0 -12px -13px;
+    z-index: 1;
 }
 
 .gh-dashboard5-select-title .ember-power-select-selected-item {