From 9bdffdf89dfa256e710fdaddfe5c95f36e58aaa6 Mon Sep 17 00:00:00 2001
From: Simon Backx <simon@ghost.org>
Date: Fri, 17 Mar 2023 11:58:27 +0100
Subject: [PATCH] Fixed body style dropdown overflow issue

no issue

When opening the 'body style' dropdown in the newsletter settings, the dropdown was not completely visible. The next 'liquid' tab covered the dropdown. This makes some adjustments to the overflow of the liquid containers and z-index of the buttons and containers to fix that.

It also removes overflow-y: auto from one of the containers because it cropped the shadow if the dropdown, while that container could never scroll (parent is scrollable).
---
 .../app/components/modals/newsletters/edit/design-labs.hbs    | 2 +-
 ghost/admin/app/components/modals/newsletters/edit/design.hbs | 2 +-
 ghost/admin/app/styles/components/modals.css                  | 4 ++--
 ghost/admin/app/styles/patterns/global.css                    | 1 +
 4 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/ghost/admin/app/components/modals/newsletters/edit/design-labs.hbs b/ghost/admin/app/components/modals/newsletters/edit/design-labs.hbs
index f1c7180da2..941cd40610 100644
--- a/ghost/admin/app/components/modals/newsletters/edit/design-labs.hbs
+++ b/ghost/admin/app/components/modals/newsletters/edit/design-labs.hbs
@@ -116,7 +116,7 @@
                 {{svg-jar "email-body"}} Body
                 <span class="gh-nav-button-expand">{{svg-jar (if isOpen "arrow-up-stroke" "arrow-down-stroke")}}</span>
             </button>
-            {{#liquid-if isOpen}}
+            {{#liquid-if isOpen class="show-overflow"}}
                 <div class="modal-fullsettings-tab-expanded">
                     <div class="gh-stack">
                         <GhFormGroup class="gh-stack-item row">
diff --git a/ghost/admin/app/components/modals/newsletters/edit/design.hbs b/ghost/admin/app/components/modals/newsletters/edit/design.hbs
index 2790b5453e..fc25773993 100644
--- a/ghost/admin/app/components/modals/newsletters/edit/design.hbs
+++ b/ghost/admin/app/components/modals/newsletters/edit/design.hbs
@@ -116,7 +116,7 @@
                 {{svg-jar "email-body"}} Body
                 <span class="gh-nav-button-expand">{{svg-jar (if isOpen "arrow-up-stroke" "arrow-down-stroke")}}</span>
             </button>
-            {{#liquid-if isOpen}}
+            {{#liquid-if isOpen class="show-overflow"}}
                 <div class="modal-fullsettings-tab-expanded">
                     <div class="gh-stack">
                         <GhFormGroup class="gh-stack-item row">
diff --git a/ghost/admin/app/styles/components/modals.css b/ghost/admin/app/styles/components/modals.css
index 9da96e5d5d..87badba800 100644
--- a/ghost/admin/app/styles/components/modals.css
+++ b/ghost/admin/app/styles/components/modals.css
@@ -629,7 +629,6 @@
     flex-direction: column;
     justify-content: space-between;
     flex-grow: 1;
-    overflow-y: auto;
     padding: 0;
     margin-bottom: 24px;
 }
@@ -655,6 +654,7 @@
     font-weight: 400;
     font-size: 1.45rem;
     transition: none;
+    z-index: 0;
 }
 
 .modal-fullsettings-tab:hover {
@@ -790,4 +790,4 @@
 
 .modal-reauthenticate .gh-signin .gh-btn-login {
     margin-top: 32px;
-}
\ No newline at end of file
+}
diff --git a/ghost/admin/app/styles/patterns/global.css b/ghost/admin/app/styles/patterns/global.css
index 67708c63e5..0d671d7a8a 100644
--- a/ghost/admin/app/styles/patterns/global.css
+++ b/ghost/admin/app/styles/patterns/global.css
@@ -776,6 +776,7 @@ input[type="image"] {
 .liquid-container.show-overflow,
 .liquid-container.show-overflow .liquid-child {
     overflow: visible;
+    z-index: 1;
 }
 .liquid-container.show-overflow.liquid-animating,
 .liquid-container.show-overflow.liquid-animating .liquid-child {