From 4e6fc0dde0842841d99cb3cf5148ca293a950301 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Wed, 7 Feb 2024 23:04:36 +0100
Subject: [PATCH] Refactor CanvasWrap component to use 'show' prop instead of
 'display' prop

---
 code/ui/manager/src/components/preview/Preview.tsx         | 2 +-
 code/ui/manager/src/components/preview/utils/components.ts | 5 ++---
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/code/ui/manager/src/components/preview/Preview.tsx b/code/ui/manager/src/components/preview/Preview.tsx
index 63d2a7fb8601..49c77ba6a125 100644
--- a/code/ui/manager/src/components/preview/Preview.tsx
+++ b/code/ui/manager/src/components/preview/Preview.tsx
@@ -103,7 +103,7 @@ const Preview = React.memo<PreviewProps>(function Preview(props) {
           />
           <S.FrameWrap key="frame">
             {tabContent && <S.IframeWrapper>{tabContent({ active: true })}</S.IframeWrapper>}
-            <S.CanvasWrap display={!tabId}>
+            <S.CanvasWrap show={!tabId}>
               <Canvas {...{ withLoader, baseUrl }} wrappers={wrappers} />
             </S.CanvasWrap>
           </S.FrameWrap>
diff --git a/code/ui/manager/src/components/preview/utils/components.ts b/code/ui/manager/src/components/preview/utils/components.ts
index 1e6e358f8fa0..a8c2d9b30f98 100644
--- a/code/ui/manager/src/components/preview/utils/components.ts
+++ b/code/ui/manager/src/components/preview/utils/components.ts
@@ -16,21 +16,20 @@ export const FrameWrap = styled.div({
   background: 'transparent',
   flex: 1,
 });
-export const CanvasWrap = styled.div<{ display: boolean }>(
+export const CanvasWrap = styled.div<{ show: boolean }>(
   {
     alignContent: 'center',
     alignItems: 'center',
     justifyContent: 'center',
     justifyItems: 'center',
     overflow: 'auto',
-    display: 'grid',
     gridTemplateColumns: '100%',
     gridTemplateRows: '100%',
     position: 'relative',
     width: '100%',
     height: '100%',
   },
-  ({ display }) => (display ? {} : { display: 'none' })
+  ({ show }) => ({ display: show ? 'grid' : 'none' })
 );
 
 export const UnstyledLink = styled(Link)({