From ebd301491921c7e526f5a9606820df4d770788af Mon Sep 17 00:00:00 2001
From: Sodbileg Gansukh <sodbileg.gansukh@gmail.com>
Date: Thu, 30 Nov 2023 12:46:10 +0800
Subject: [PATCH] Fixed preview visibility in PreviewModal (#19191)

fixes ADM-22

- the mobile tab bar is shown within screen size of 800px and below
- this makes the preview visbility consistent with the mobile screen size range
---
 apps/admin-x-design-system/src/global/modal/PreviewModal.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/admin-x-design-system/src/global/modal/PreviewModal.tsx b/apps/admin-x-design-system/src/global/modal/PreviewModal.tsx
index 4c68a4fa40..f1fa63d411 100644
--- a/apps/admin-x-design-system/src/global/modal/PreviewModal.tsx
+++ b/apps/admin-x-design-system/src/global/modal/PreviewModal.tsx
@@ -272,11 +272,11 @@ export const PreviewModalContent: React.FC<PreviewModalProps> = ({
             hideXOnMobile
         >
             <div className='flex h-full grow'>
-                <div className={`hidden grow flex-col md:!visible md:!flex ${previewBgColor === 'grey' ? 'bg-grey-50' : 'bg-white'}`}>
+                <div className={`hidden grow flex-col [@media(min-width:801px)]:!visible [@media(min-width:801px)]:!flex ${previewBgColor === 'grey' ? 'bg-grey-50' : 'bg-white'}`}>
                     {preview}
                 </div>
                 {sidebar &&
-                    <div className='relative flex h-full w-full flex-col border-l border-grey-100 dark:border-grey-900 md:w-auto md:basis-[400px]'>
+                    <div className='relative flex h-full w-full flex-col border-l border-grey-100 dark:border-grey-900 [@media(min-width:801px)]:w-auto [@media(min-width:801px)]:basis-[400px]'>
                         {sidebarHeader ? sidebarHeader : (
                             <div className='flex max-h-[74px] items-center justify-between gap-3 px-7 py-5'>
                                 <Heading level={titleHeadingLevel}>{title}</Heading>