Fixed interfering actions menus in newsletter management

no issue

When multiple newsletters existed, the actions dropdown menus were all rendered on top of each other but hidden with CSS. This resulted in clicks that you expected to open an actions menu immediately triggering actions on a newsletter higher up in the list.

- switched from `<GhDropdown>` to `<GhBasicDropdown>` which adds/removes the dropdown content elements rather than rendering everything and hiding with CSS
- updated styling to match previous implementation
- added `.anim-fade-in-scale` classes for use with `{{css-transition}}` so we can keep the open/close animation
  - `ember-basic-dropdown` does have support for transitioning in/out CSS classes but they are only triggered on the first open/close for each menu which resulted in oddly inconsistent behaviour with multiple menus in a list
  - close animation doesn't actually work because the outer elements are removed by `ember-basic-dropdown` preventing `css-transitions` from performing it's animation

ghost/admin/.lint-todo

@@ -1104,3 +1104,4 @@ add|ember-template-lint|no-action|4|11|4|11|831dd12209c22868d0614c65417281fda799
 add|ember-template-lint|require-valid-alt-text|3|44|3|44|a7f0566c430150bae4153e0dfb489a218bdeb8a4|1649203200000|1651795200000|1654387200000|lib/koenig-editor/addon/components/koenig-card-embed/nft.hbs
 add|ember-template-lint|require-valid-alt-text|8|20|8|20|9d0c591086dc9139ff38a7b385c3367a83438786|1649203200000|1651795200000|1654387200000|lib/koenig-editor/addon/components/koenig-card-embed/nft.hbs
 add|ember-template-lint|require-input-label|10|12|10|12|8c3c0ea315ff4da828363989a45fa11256a78796|1649203200000|1651795200000|1654387200000|lib/koenig-editor/addon/components/koenig-card-image/selector-tenor.hbs
+remove|ember-template-lint|no-with|2|0|2|0|0f2ccc59fb9c8536430187580b4cfcc9e946d780|1649203200000|1651795200000|1654387200000|app/components/gh-basic-dropdown.hbs

ghost/admin/app/components/gh-basic-dropdown.hbs

@@ -1,5 +1,5 @@
 {{!-- no changes from upstream --}}
-{{#with
+{{#let
   (hash
     uniqueId=this.publicAPI.uniqueId
     isOpen=this.publicAPI.isOpen
@@ -36,4 +36,4 @@ as |api|
   {{else}}
     {{yield api}}
   {{/if}}
-{{/with}}
+{{/let}}

ghost/admin/app/components/settings/members-email-labs/newsletter-management.hbs

@@ -82,21 +82,15 @@
                                 {{#if this.displayingDefault}}
                                     <LinkTo @route="settings.members-email-labs.edit-newsletter" @model={{newsletter.id}} class="gh-btn gh-btn-green"><span>Customize &rarr;</span></LinkTo>
                                 {{else}}
-                                    <span class="dropdown">
-                                        <GhDropdownButton
-                                            @dropdownName="newsletter-actions-menu-newsletter-{{newsletter.id}}"
-                                            @classNames="gh-btn gh-btn-action-icon gh-btn-icon gh-btn-outline gh-product-card-actions-button icon-only"
-                                        >
+                                    <GhBasicDropdown @verticalPosition="below" @renderInPlace={{true}} as |dd|>
+                                        <dd.Trigger class="gh-btn gh-btn-action-icon gh-btn-icon gh-btn-outline gh-product-card-actions-button icon-only">
                                             <span>
                                                 {{svg-jar "dotdotdot"}}
                                                 <span class="hidden">Actions</span>
                                             </span>
-                                        </GhDropdownButton>
-                                        <GhDropdown
-                                            @name="newsletter-actions-menu-newsletter-{{newsletter.id}}"
-                                            @tagName="ul"
-                                            @classNames="gh-newsletter-actions-menu dropdown-menu dropdown-triangle-top-right"
-                                        >
+                                        </dd.Trigger>
+                                        <dd.Content class="relative-dropdown-menu gh-newsletter-actions-menu">
+                                            <ul class="dropdown-menu dropdown-triangle-top-right" role="listbox" {{css-transition "anim-fade-in-scale"}}>
                                                 <li>
                                                     <LinkTo @route="settings.members-email-labs.edit-newsletter" @model={{newsletter.id}} class="mr2"><span>Edit</span></LinkTo>
                                                 </li>
@@ -114,8 +108,9 @@
                                                         </button>
                                                     </li>
                                                 {{/if}}
-                                        </GhDropdown>
-                                    </span>
+                                            </ul>
+                                        </dd.Content>
+                                    </GhBasicDropdown>
                                 {{/if}}
                             </div>
                         </DraggableObject>

ghost/admin/app/styles/layouts/settings.css

@@ -1021,15 +1021,8 @@
     margin-right: 0;
 }
 
-.gh-newsletter-card-block .dropdown {
-    z-index: inherit;
-}
-
-.gh-newsletter-card-block .gh-newsletter-actions-menu {
-    z-index: 9999;
-    top: calc(100% + 6px);
-    left: auto;
-    right: 0;
+.gh-newsletter-actions-menu {
+    margin-top: 4px;
 }
 
 .gh-add-newsletter {

ghost/admin/app/styles/patterns/global.css

@@ -729,6 +729,27 @@ input[type="image"] {
     animation-fill-mode: forwards;
 }
 
+/*
+ * for use with {{css-transition "anim-fade-in-scale"}}
+ * used on elements that are added/removed rather than shown/hidden
+ */
+.anim-fade-in-scale-enter,
+.anim-fade-in-scale-leave-to {
+    opacity: 0;
+}
+.anim-fade-in-scale-enter-to,
+.anim-fade-in-scale-leave {
+    opacity: 1;
+}
+.anim-fade-in-scale-enter-active {
+    animation: fade-in 0.2s;
+    animation-fill-mode: forwards;
+}
+.anim-fade-in-scale-leave-active {
+    animation: fade-out 0.5s;
+    animation-fill-mode: forwards;
+}
+
 /*
  * liquid-fire normally hides overflow so that the container size can grow to
  * reveal it's contents but that hidden overflow will cut off tooltips or other