From 2029a5846a7200de5eb68903d26c7efaeb2eade1 Mon Sep 17 00:00:00 2001
From: Sodbileg Gansukh <sodbileg.gansukh@gmail.com>
Date: Thu, 14 Mar 2024 14:29:17 +0800
Subject: [PATCH] Fixed Portal preview flashing issue in Offers (#19862)

ref DES-101
---
 apps/admin-x-design-system/src/global/modal/PreviewModal.tsx  | 4 ++--
 .../src/components/settings/membership/portal/PortalFrame.tsx | 3 +++
 2 files changed, 5 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 565080a339..db18e87ba4 100644
--- a/apps/admin-x-design-system/src/global/modal/PreviewModal.tsx
+++ b/apps/admin-x-design-system/src/global/modal/PreviewModal.tsx
@@ -205,7 +205,7 @@ export const PreviewModalContent: React.FC<PreviewModalProps> = ({
         }
 
         const containerClasses = clsx(
-            'min-w-100 absolute inset-y-0 left-0 right-[400px] flex grow flex-col overflow-y-auto',
+            'min-w-100 absolute inset-y-0 left-0 right-[400px] flex w-full grow flex-col overflow-y-auto',
             previewBgClass
         );
 
@@ -275,7 +275,7 @@ export const PreviewModalContent: React.FC<PreviewModalProps> = ({
             hideXOnMobile
         >
             <div className='flex h-full grow'>
-                <div className={`hidden grow flex-col [@media(min-width:801px)]:!visible [@media(min-width:801px)]:!flex ${previewBgColor === 'grey' ? 'bg-grey-50' : 'bg-white'}`}>
+                <div className={`relative hidden grow flex-col [@media(min-width:801px)]:!visible [@media(min-width:801px)]:!flex ${previewBgColor === 'grey' ? 'bg-grey-50' : 'bg-white'}`}>
                     {preview}
                 </div>
                 {sidebar &&
diff --git a/apps/admin-x-settings/src/components/settings/membership/portal/PortalFrame.tsx b/apps/admin-x-settings/src/components/settings/membership/portal/PortalFrame.tsx
index 1882f01c21..41973343e3 100644
--- a/apps/admin-x-settings/src/components/settings/membership/portal/PortalFrame.tsx
+++ b/apps/admin-x-settings/src/components/settings/membership/portal/PortalFrame.tsx
@@ -56,6 +56,9 @@ const PortalFrame: React.FC<PortalFrameProps> = ({href, onDestroyed, selectedTab
     if (portalParent === 'preview') {
         loaderClassNames = 'absolute z-50 mt-[-7%] flex h-screen items-center justify-center';
         loaderVisibility = 'invisible';
+    } else if (portalParent === 'offers') {
+        loaderClassNames = 'absolute z-50 flex w-full h-full items-center justify-center';
+        loaderVisibility = 'invisible';
     }
 
     return (