From efb824408624e2d9f5b8d8693fabbb4bc59590a7 Mon Sep 17 00:00:00 2001
From: Yossi Saadi <yossisa@monday.com>
Date: Tue, 10 Dec 2024 15:44:16 +0200
Subject: [PATCH] test(Modal): fix Modal's rendering in Chromatic viewport to
 capture all Modal and not cut it

---
 .../Modal/Modal/__stories__/Modal.stories.helpers.tsx        | 4 ++--
 .../Modal/Modal/__stories__/Modal.stories.module.scss        | 2 +-
 .../__stories__/ModalBasicLayout.stories.tsx                 | 5 ++++-
 .../__stories__/ModalMediaLayout.stories.tsx                 | 5 ++++-
 .../__stories__/ModalSideBySideLayout.stories.tsx            | 5 ++++-
 5 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/packages/core/src/components/Modal/Modal/__stories__/Modal.stories.helpers.tsx b/packages/core/src/components/Modal/Modal/__stories__/Modal.stories.helpers.tsx
index fa63e02beb..5bd2d43ff4 100644
--- a/packages/core/src/components/Modal/Modal/__stories__/Modal.stories.helpers.tsx
+++ b/packages/core/src/components/Modal/Modal/__stories__/Modal.stories.helpers.tsx
@@ -25,14 +25,14 @@ export const OpenedModalPreview = forwardRef(
     const isAfterFirstRender = useAfterFirstRender();
     return (
       <div
-        className={cx(styles.preview, getStyle(styles, size))}
+        className={cx(styles.preview, { [getStyle(styles, size)]: isDocsView })}
         ref={ref}
         // workaround to prevent modal from autofocusing on page load
         // autofocus would work as expected when modal closes and reopens
         {...(!isAfterFirstRender.current && isDocsView && { "data-no-autofocus": true })}
       >
         <Button onClick={onOpenModalClick}>Open Modal</Button>
-        {isDocsView ? modal : createPortal(modal, document.body)}
+        {modal}
       </div>
     );
   }
diff --git a/packages/core/src/components/Modal/Modal/__stories__/Modal.stories.module.scss b/packages/core/src/components/Modal/Modal/__stories__/Modal.stories.module.scss
index c54af9e71a..d98b242a65 100644
--- a/packages/core/src/components/Modal/Modal/__stories__/Modal.stories.module.scss
+++ b/packages/core/src/components/Modal/Modal/__stories__/Modal.stories.module.scss
@@ -7,7 +7,7 @@
 .preview {
   padding-inline-start: 32px;
   padding-block-start: 40px;
-  height: 360px;
+  height: 100vh;
   width: 100%;
   container-type: inline-size;
 
diff --git a/packages/core/src/components/Modal/layouts/ModalBasicLayout/__stories__/ModalBasicLayout.stories.tsx b/packages/core/src/components/Modal/layouts/ModalBasicLayout/__stories__/ModalBasicLayout.stories.tsx
index 4530bf9abc..029d44ae8f 100644
--- a/packages/core/src/components/Modal/layouts/ModalBasicLayout/__stories__/ModalBasicLayout.stories.tsx
+++ b/packages/core/src/components/Modal/layouts/ModalBasicLayout/__stories__/ModalBasicLayout.stories.tsx
@@ -29,7 +29,10 @@ export default {
   component: Modal,
   subcomponents: { ModalBasicLayout, ModalHeader, ModalContent, ModalFooter, ModalFooterWizard, TransitionView },
   argTypes: metaSettings.argTypes,
-  decorators: metaSettings.decorators
+  decorators: metaSettings.decorators,
+  parameters: {
+    layout: "fullscreen"
+  }
 } satisfies Meta<typeof Modal>;
 
 export const Overview: Story = {
diff --git a/packages/core/src/components/Modal/layouts/ModalMediaLayout/__stories__/ModalMediaLayout.stories.tsx b/packages/core/src/components/Modal/layouts/ModalMediaLayout/__stories__/ModalMediaLayout.stories.tsx
index d8e47777af..a537e6caa8 100644
--- a/packages/core/src/components/Modal/layouts/ModalMediaLayout/__stories__/ModalMediaLayout.stories.tsx
+++ b/packages/core/src/components/Modal/layouts/ModalMediaLayout/__stories__/ModalMediaLayout.stories.tsx
@@ -38,7 +38,10 @@ export default {
     TransitionView
   },
   argTypes: metaSettings.argTypes,
-  decorators: metaSettings.decorators
+  decorators: metaSettings.decorators,
+  parameters: {
+    layout: "fullscreen"
+  }
 } satisfies Meta<typeof Modal>;
 
 export const Overview: Story = {
diff --git a/packages/core/src/components/Modal/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayout.stories.tsx b/packages/core/src/components/Modal/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayout.stories.tsx
index fd95947245..fa49a4346a 100644
--- a/packages/core/src/components/Modal/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayout.stories.tsx
+++ b/packages/core/src/components/Modal/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayout.stories.tsx
@@ -41,7 +41,10 @@ export default {
     TransitionView
   },
   argTypes: metaSettings.argTypes,
-  decorators: metaSettings.decorators
+  decorators: metaSettings.decorators,
+  parameters: {
+    layout: "fullscreen"
+  }
 } satisfies Meta<typeof Modal>;
 
 export const Overview: Story = {