Updated drawer so you can interact with page behind it (#21778)

ref https://linear.app/ghost/issue/AP-613/make-drawer-wider-when-displaying-articles-on-larger-screens

- Added a prop to Modal which allows you to interact with the page
behind the Modal, so the main navigation could still be used while the
Article modal is opened
- Removed the breakpoint we only use in one place, and switched to using
an arbitrary Tailwind breakpoint that matches the one in admin instead

apps/admin-x-activitypub/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tryghost/admin-x-activitypub",
-  "version": "0.3.31",
+  "version": "0.3.32",
   "license": "MIT",
   "repository": {
     "type": "git",

apps/admin-x-activitypub/src/components/feed/ArticleModal.tsx

@@ -269,6 +269,7 @@ const ArticleModal: React.FC<ArticleModalProps> = ({
     return (
         <Modal
             align='right'
+            allowBackgroundInteraction={true}
             animate={true}
             backDrop={backDrop}
             backDropClick={true}

apps/admin-x-design-system/src/global/modal/Modal.tsx

@@ -47,6 +47,7 @@ export interface ModalProps {
     animate?: boolean;
     formSheet?: boolean;
     enableCMDS?: boolean;
+    allowBackgroundInteraction?: boolean;
 }
 
 export const topLevelBackdropClasses = 'bg-[rgba(98,109,121,0.2)] backdrop-blur-[3px]';
@@ -82,7 +83,8 @@ const Modal: React.FC<ModalProps> = ({
     dirty = false,
     animate = true,
     formSheet = false,
-    enableCMDS = true
+    enableCMDS = true,
+    allowBackgroundInteraction = false
 }) => {
     const modal = useModal();
     const {setGlobalDirtyState} = useGlobalDirtyState();
@@ -203,7 +205,8 @@ const Modal: React.FC<ModalProps> = ({
     );
 
     let backdropClasses = clsx(
-        'fixed inset-0 z-[1000] h-[100vh] w-[100vw]'
+        'fixed inset-0 z-[1000] h-[100vh] w-[100vw]',
+        allowBackgroundInteraction && 'pointer-events-none'
     );
 
     let paddingClasses = '';
@@ -378,7 +381,7 @@ const Modal: React.FC<ModalProps> = ({
     } else if (width === 'toSidebar') {
         modalClasses = clsx(
             modalClasses,
-            'w-full max-w-[calc(100dvw_-_280px)] lg:max-w-full lgPlus:max-w-[calc(100dvw_-_320px)]'
+            'w-full max-w-[calc(100dvw_-_280px)] lg:max-w-full min-[1280px]:max-w-[calc(100dvw_-_320px)]'
         );
     }
 
@@ -427,7 +430,10 @@ const Modal: React.FC<ModalProps> = ({
                 (backDrop && !formSheet) && topLevelBackdropClasses,
                 formSheet && 'bg-[rgba(98,109,121,0.08)]'
             )}></div>
-            <section className={modalClasses} data-testid={testId} style={modalStyles}>
+            <section className={clsx(
+                modalClasses,
+                allowBackgroundInteraction && 'pointer-events-auto'
+            )} data-testid={testId} style={modalStyles}>
                 {header === false ? '' : (!topRightContent || topRightContent === 'close' ?
                     (<header className={headerClasses}>
                         {title && <Heading level={3}>{title}</Heading>}

apps/admin-x-design-system/tailwind.config.cjs

@@ -12,7 +12,6 @@ module.exports = {
             sm: '480px',
             md: '640px',
             lg: '1024px',
-            lgPlus: '1280px',
             xl: '1320px',
             xxl: '1440px',
             xxxl: '1600px',