Made drawer view for Articles wider for easier reading (#21760)

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

- The drawer view for viewing Articles was only slightly wider than the
one for viewing Posts. Since we've decided to make a bigger separation
between these 2 types of post, we wanted to make the drawer almost full
width (excluding the main navigation sidebar).
- This also removes the backdrop from drawer view so the interaction
would be lighter.
- To achieve this we're adding another CSS breakpoint so it would match
the one used in Admin. We didn’t have one since our DS was mostly used
in isolation in Settings.

apps/admin-x-activitypub/package.json

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

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

@@ -24,6 +24,7 @@ interface ArticleModalProps {
     focusReply: boolean;
     focusReplies: boolean;
     width?: 'narrow' | 'wide';
+    backDrop?: boolean;
     updateActivity: (id: string, updated: Partial<Activity>) => void;
     history: {
         activityId: string;
@@ -163,11 +164,12 @@ const ArticleModal: React.FC<ArticleModalProps> = ({
     focusReply,
     focusReplies,
     width = 'narrow',
+    backDrop = false,
     updateActivity = () => {},
     history = []
 }) => {
     const MODAL_SIZE_SM = 640;
-    const MODAL_SIZE_LG = 840;
+    const MODAL_SIZE_LG = 1420;
     const [isFocused] = useState(focusReply ? 1 : 0);
 
     const {threadQuery, addToThread} = useThreadForUser('index', activityId);
@@ -268,15 +270,17 @@ const ArticleModal: React.FC<ArticleModalProps> = ({
         <Modal
             align='right'
             animate={true}
+            backDrop={backDrop}
+            backDropClick={true}
             footer={<></>}
             height={'full'}
             padding={false}
             size='bleed'
-            width={modalSize}
+            width={modalSize === MODAL_SIZE_LG ? 'toSidebar' : modalSize}
         >
             <div className='flex h-full flex-col'>
                 <div className='sticky top-0 z-50 border-b border-grey-200 bg-white py-8'>
-                    <div className={`flex h-8 ${modalSize === MODAL_SIZE_LG ? 'mx-auto w-full max-w-[580px]' : 'px-8'}`}>
+                    <div className={`flex h-8 ${modalSize === MODAL_SIZE_LG ? 'mx-auto w-full max-w-[644px] px-8' : 'px-8'}`}>
                         {(canNavigateBack || (activityThreadParents.length > 0)) ? (
                             <div className='col-[1/2] flex items-center justify-between'>
                                 <Button className='transition-color flex h-10 w-10 items-center justify-center rounded-full bg-white hover:bg-grey-100' icon='chevron-left' size='sm' unstyled onClick={navigateBack}/>
@@ -304,7 +308,7 @@ const ArticleModal: React.FC<ArticleModalProps> = ({
                 </div>
 
                 <div className='grow overflow-y-auto'>
-                    <div className='mx-auto max-w-[580px] pb-10 pt-5'>
+                    <div className='mx-auto max-w-[644px] px-8 pb-10 pt-5'>
                         {activityThreadParents.map((item) => {
                             return (
                                 <>

apps/admin-x-activitypub/src/utils/content-handlers.ts

@@ -13,6 +13,7 @@ export const handleViewContent = (
         object: activity.object,
         actor: authorActor,
         focusReply,
+        backDrop: activity.object.type === 'Article' ? false : false,
         width: activity.object.type === 'Article' ? 'wide' : 'narrow',
         updateActivity
     });

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

@@ -16,7 +16,7 @@ export interface ModalProps {
      * Possible values are: `sm`, `md`, `lg`, `xl, `full`, `bleed`. Yu can also use any number to set an arbitrary width.
      */
     size?: ModalSize;
-    width?: 'full' | number;
+    width?: 'full' | 'toSidebar' | number;
     height?: 'full' | number;
     align?: 'center' | 'left' | 'right';
 
@@ -375,6 +375,11 @@ const Modal: React.FC<ModalProps> = ({
             modalClasses,
             'w-full'
         );
+    } else if (width === 'toSidebar') {
+        modalClasses = clsx(
+            modalClasses,
+            'w-full max-w-[calc(100dvw_-_280px)] lg:max-w-full lgPlus:max-w-[calc(100dvw_-_320px)]'
+        );
     }
 
     if (typeof height === 'number') {

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

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