Added inner scrolling for Design sidebar in AdminX

refs. https://github.com/TryGhost/Team/issues/3354

ghost/admin-x-settings/src/admin-x-ds/global/Modal.tsx

@@ -169,7 +169,7 @@ const Modal: React.FC<ModalProps> = ({
     );
 
     const footer = (stickyFooter ?
-        <StickyFooter bgTWColor='white' shiftY={footerContainerBottom}>
+        <StickyFooter shiftY={footerContainerBottom}>
             {footerContent}
         </StickyFooter>
         :

ghost/admin-x-settings/src/admin-x-ds/global/PreviewModal.tsx

@@ -73,7 +73,7 @@ const PreviewModal: React.FC<PreviewModalProps> = ({
                             </>
                         </div>
                     )}
-                    <div className={`grow ${sidebarPadding && 'p-7'}`}>
+                    <div className={`grow ${sidebarPadding && 'p-7'} flex flex-col justify-between overflow-y-auto`}>
                         {sidebar}
                     </div>
                 </div>

ghost/admin-x-settings/src/admin-x-ds/global/StickyFooter.stories.tsx

@@ -31,6 +31,7 @@ const footerContents = (
 
 export const Default: Story = {
     args: {
-        children: footerContents
+        children: footerContents,
+        contentBgColorClass: 'bg-[#efefef]'
     }
 };

ghost/admin-x-settings/src/admin-x-ds/global/StickyFooter.tsx

@@ -3,34 +3,61 @@ import clsx from 'clsx';
 
 interface StickyFooterProps {
     shiftY?: string;
-    bgTWColor: string;
+    footerBgColorClass?: string;
+    contentBgColorClass?: string;
+    height?: number;
     children?: React.ReactNode;
-
-    containerClasses?: string;
-    contentClasses?: string;
 }
 
-const StickyFooter: React.FC<StickyFooterProps> = ({shiftY, bgTWColor = 'white', children, containerClasses, contentClasses}) => {
+const StickyFooter: React.FC<StickyFooterProps> = ({
-    const footerContainerBottom = shiftY ? `calc(${shiftY})` : '0';
+    shiftY,
-    const shadowBottom = shiftY ? `calc(${shiftY} + 72px)` : '72px';
+    footerBgColorClass = 'bg-white',
-
+    contentBgColorClass = 'bg-white',
-    const footerContainerClasses = clsx(
+    height = 96,
-        'w-100 sticky z-[100]',
+    children
-        containerClasses
+}) => {
+    const containerClasses = clsx(
+        'w-100 sticky bottom-[-24px] z-[9997] m-0 box-border p-0'
     );
+    const containerBottom = shiftY ? `calc(${shiftY} - 24px)` : '-24px';
+    const containerHeight = `${height + 24}px`;
 
-    const shadowClasses = `sticky bottom-[72px] mx-2 block h-[22px] rounded-full shadow-[0_0_0_1px_rgba(0,0,0,.025),0_-8px_16px_-3px_rgba(0,0,0,.08)]`;
+    const coverClasses = clsx(
-
+        'sticky z-[9998] block h-[24px]',
-    const footerClasses = clsx(
+        contentBgColorClass
-        `bg-${bgTWColor} sticky z-[101] mb-[-24px] flex min-h-[48px] items-center justify-between`,
-        contentClasses
     );
+    const coverBottom = '0';
+
+    const contentClasses = clsx(
+        `sticky z-[9999] mb-[-24px] flex items-center justify-between`,
+        // 'min-h-[48px]',
+        'h-[96px]',
+        footerBgColorClass
+    );
+    const contentBottom = '0';
+    const contentHeight = `${height}px`;
+
+    const shadowClasses = `sticky mx-2 block h-[24px] rounded-full shadow-[0_0_0_1px_rgba(0,0,0,.025),0_-8px_16px_-3px_rgba(0,0,0,.08)]`;
+    const shadowBottom = shiftY ? `calc(${shiftY} + ${height - 24}px)` : `${height - 24}px`;
 
     return (
-        <div className={footerContainerClasses} style={{
+        <div className={containerClasses}
-            bottom: footerContainerBottom
+            style={{
-        }}>
+                bottom: containerBottom,
-            <div className={footerClasses}>
+                height: containerHeight
+            }}
+        >
+            <div className={coverClasses}
+                style={{
+                    bottom: coverBottom
+                }}
+            ></div>
+            <div className={contentClasses}
+                style={{
+                    bottom: contentBottom,
+                    height: contentHeight
+                }}
+            >
                 {children}
             </div>
             <div className={shadowClasses}

ghost/admin-x-settings/src/components/settings/site/DesignModal.tsx

@@ -4,6 +4,7 @@ import NiceModal from '@ebay/nice-modal-react';
 import PreviewModal from '../../../admin-x-ds/global/PreviewModal';
 import React from 'react';
 import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
+import StickyFooter from '../../../admin-x-ds/global/StickyFooter';
 import TabView from '../../../admin-x-ds/global/TabView';
 import ThemePreview from './designAndBranding/ThemePreivew';
 import ThemeSettings from './designAndBranding/ThemeSettings';
@@ -34,7 +35,17 @@ const Sidebar: React.FC = () => {
     ];
 
     return (
-        <TabView tabs={tabs} />
+        <>
+            <div className='p-7'>
+                <TabView tabs={tabs} />
+            </div>
+            <StickyFooter>
+                <button className='flex w-full cursor-pointer flex-col px-7' type='button' onClick={() => {}}>
+                    <strong>Change theme</strong>
+                    <span className='text-sm text-grey-600'>Casper</span>
+                </button>
+            </StickyFooter>
+        </>
     );
 };
 
@@ -44,7 +55,8 @@ const DesignModal: React.FC = () => {
             title: 'Design',
             okLabel: 'Save',
             preview: <ThemePreview />,
-            sidebar: <Sidebar />
+            sidebar: <Sidebar />,
+            sidebarPadding: false
         });
     };