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)({