Fixed settings scroll bounce reveal (#27824)

closes
https://linear.app/ghost/issue/DES-1371/prevent-overscroll-behavior-in-design-interface

Chrome could expose the admin UI behind settings during fast edge
scrolling. The settings overlay now provides the revealed backdrop and
keeps scroll momentum contained on the settings panes.

Author: minimaluminium

apps/admin-x-settings/src/main-content.tsx

@@ -17,7 +17,7 @@ const Page: React.FC<{children: ReactNode}> = ({children}) => {
         <div className='fixed top-2 right-0 z-50 m-8 flex justify-end bg-transparent tablet:fixed tablet:top-0' id="done-button-container">
             <ExitSettingsButton />
         </div>
-        <div className="fixed top-0 left-0 flex size-full dark:bg-grey-950" id="admin-x-settings-content">
+        <div className="fixed top-0 left-0 flex size-full bg-grey-50 dark:bg-grey-950 dark:tablet:bg-[#101114]" id="admin-x-settings-content">
             {children}
         </div>
     </>;
@@ -76,10 +76,12 @@ const MainContent: React.FC = () => {
     if (isEditorUser(currentUser)) {
         return (
             <Page>
-                <div className='flex-1 overflow-y-auto bg-white dark:bg-grey-950' id="admin-x-settings-scroller">
-                    <div className='mx-auto max-w-5xl px-[5vmin] tablet:mt-16 xl:mt-10'>
-                        <Heading className='mb-[5vmin]'>Settings</Heading>
-                        <Users highlight={false} keywords={EMPTY_KEYWORDS} />
+                <div className='flex-1 bg-white dark:bg-grey-950'>
+                    <div className='h-full overflow-y-auto overscroll-y-contain' id="admin-x-settings-scroller">
+                        <div className='mx-auto max-w-5xl px-[5vmin] tablet:mt-16 xl:mt-10'>
+                            <Heading className='mb-[5vmin]'>Settings</Heading>
+                            <Users highlight={false} keywords={EMPTY_KEYWORDS} />
+                        </div>
                     </div>
                 </div>
             </Page>
@@ -89,13 +91,15 @@ 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="fixed inset-x-0 top-0 z-[35] max-w-[calc(100%-16px)] flex-1 basis-[320px] bg-white p-8 tablet:relative tablet:inset-x-auto tablet:top-auto tablet:h-full tablet:overflow-y-scroll tablet:bg-grey-50 tablet:py-0 dark:bg-grey-950 dark:tablet:bg-[#101114]" id="admin-x-settings-sidebar-scroller">
+            <div className="fixed inset-x-0 top-0 z-[35] max-w-[calc(100%-16px)] flex-1 basis-[320px] overscroll-y-contain bg-white p-8 tablet:relative tablet:inset-x-auto tablet:top-auto tablet:h-full tablet:overflow-y-scroll tablet:bg-grey-50 tablet:py-0 dark:bg-grey-950 dark:tablet:bg-[#101114]" id="admin-x-settings-sidebar-scroller">
                 <div className="relative w-full">
                     <Sidebar />
                 </div>
             </div>
-            <div className="relative h-full flex-1 overflow-y-scroll bg-white pt-13 tablet:basis-[800px] dark:bg-grey-950 dark:tablet:bg-black" id="admin-x-settings-scroller">
-                <Settings />
+            <div className="h-full flex-1 bg-white tablet:basis-[800px] dark:bg-grey-950 dark:tablet:bg-black">
+                <div className="relative h-full overflow-y-scroll overscroll-y-contain pt-13" id="admin-x-settings-scroller">
+                    <Settings />
+                </div>
             </div>
         </Page>
     );