From ad491ea4f3832c0c104126b1c0b8316bc9c766e8 Mon Sep 17 00:00:00 2001
From: Peter Zimon <zimo@ghost.org>
Date: Thu, 7 Mar 2024 14:46:48 +0100
Subject: [PATCH] Fixed udpated banner z-index (#19822)

refs.
https://linear.app/tryghost/issue/DES-168/z-index-is-really-messed-up-in-settings

The update banner's z-index was conflicting with settings.
---
 apps/admin-x-settings/src/MainContent.tsx     |  4 ++--
 .../src/components/ExitSettingsButton.tsx     |  2 +-
 apps/admin-x-settings/src/styles/index.css    | 20 +++++++++++++++++++
 .../app/styles/components/notifications.css   |  1 +
 4 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/apps/admin-x-settings/src/MainContent.tsx b/apps/admin-x-settings/src/MainContent.tsx
index e49b36bb8f..94bcb0cf12 100644
--- a/apps/admin-x-settings/src/MainContent.tsx
+++ b/apps/admin-x-settings/src/MainContent.tsx
@@ -11,7 +11,7 @@ import {useRouting} from '@tryghost/admin-x-framework/routing';
 
 const Page: React.FC<{children: ReactNode}> = ({children}) => {
     return <>
-        <div className='sticky top-0 z-30 bg-white px-[5vmin] py-4 dark:bg-grey-975 tablet:fixed tablet:bg-transparent tablet:px-6 dark:tablet:bg-transparent xl:p-12'>
+        <div className='sticky top-0 z-30 bg-white px-[5vmin] py-4 dark:bg-grey-975 tablet:fixed tablet:bg-transparent tablet:px-6 dark:tablet:bg-transparent xl:p-12' id="done-button-container">
             <ExitSettingsButton />
         </div>
         <div className="w-full dark:bg-grey-975 tablet:fixed tablet:left-0 tablet:top-0 tablet:flex tablet:h-full" id="admin-x-settings-content">
@@ -53,7 +53,7 @@ const MainContent: React.FC = () => {
     return (
         <Page>
             {loadingModal && <div className={`fixed inset-0 z-40 h-[calc(100vh-55px)] w-[100vw] tablet:h-[100vh] ${topLevelBackdropClasses}`} />}
-            <div className="no-scrollbar fixed inset-x-0 top-[52px] z-[999] flex-1 basis-[320px] bg-white px-8 pb-8 dark:bg-grey-975 tablet:relative tablet:inset-x-auto tablet:top-auto tablet:h-full tablet:overflow-y-scroll tablet:bg-grey-50 tablet:pb-0 dark:tablet:bg-black" id="admin-x-settings-sidebar-scroller">
+            <div className="no-scrollbar fixed inset-x-0 top-[52px] z-[35] flex-1 basis-[320px] bg-white px-8 pb-8 dark:bg-grey-975 tablet:relative tablet:inset-x-auto tablet:top-auto tablet:h-full tablet:overflow-y-scroll tablet:bg-grey-50 tablet:pb-0 dark:tablet:bg-black" id="admin-x-settings-sidebar-scroller">
                 <div className="relative w-full">
                     <Sidebar />
                 </div>
diff --git a/apps/admin-x-settings/src/components/ExitSettingsButton.tsx b/apps/admin-x-settings/src/components/ExitSettingsButton.tsx
index e6ce590672..eefa5ade04 100644
--- a/apps/admin-x-settings/src/components/ExitSettingsButton.tsx
+++ b/apps/admin-x-settings/src/components/ExitSettingsButton.tsx
@@ -9,7 +9,7 @@ const ExitSettingsButton: React.FC = () => {
     };
 
     return (
-        <Button data-testid="exit-settings" label='&larr; Done' link={true} onClick={() => confirmIfDirty(isDirty, navigateAway)} />
+        <Button data-testid="exit-settings" id="done-button" label='&larr; Done' link={true} onClick={() => confirmIfDirty(isDirty, navigateAway)} />
     );
 };
 
diff --git a/apps/admin-x-settings/src/styles/index.css b/apps/admin-x-settings/src/styles/index.css
index d1f1f198ed..491088ed9e 100644
--- a/apps/admin-x-settings/src/styles/index.css
+++ b/apps/admin-x-settings/src/styles/index.css
@@ -1 +1,21 @@
 @import '@tryghost/admin-x-design-system/styles.css';
+
+/* Only settings related overrides */
+.gh-update-banner ~ * #admin-x-settings-content {
+    top: 48px;
+}
+
+.gh-update-banner ~ * #done-button-container {
+    top: 48px;
+}
+
+@media (max-width: 860px) {
+    .gh-update-banner ~ * #admin-x-settings-sidebar-scroller {
+        position: sticky;
+        margin-bottom: -60px;
+    }
+
+    .gh-update-banner ~ * #done-button-container {
+        top: 0;
+    }
+}
\ No newline at end of file
diff --git a/ghost/admin/app/styles/components/notifications.css b/ghost/admin/app/styles/components/notifications.css
index 1ed6f45335..3231ecf949 100644
--- a/ghost/admin/app/styles/components/notifications.css
+++ b/ghost/admin/app/styles/components/notifications.css
@@ -332,6 +332,7 @@
     background: var(--black);
     color: #fff;
     font-size: 1.45rem;
+    z-index: 30;
 }
 
 .gh-update-banner a {