Fix jumpy modal animation on resize (#3285)

* fix(main nav redesign): fix jumpy modal animation on resize * chore: remove transition from stacking layer --------- Co-authored-by: Ddouglasz <douglas.egiemeh@gmail.com> Co-authored-by: Klaudija Ljevar <klaudija.ljevar@gmail.com>
commercetools · Nov 29, 2023 · ceb1b74 · ceb1b74 · github-actions · Nov 29, 2023
1 parent 67bdd36
commit ceb1b74
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 0 deletions.
diff --git a/.changeset/silly-beds-chew.md b/.changeset/silly-beds-chew.md
@@ -0,0 +1,5 @@
+---
+'@commercetools-frontend/application-components': patch
+---
+
+fix issue of jumpy modal animation on page resize
diff --git a/packages/application-components/src/components/portals-container/portals-container.tsx b/packages/application-components/src/components/portals-container/portals-container.tsx
@@ -114,6 +114,7 @@ const PortalsContainer = forwardRef<TLayoutRefs, TPortalsContainerProps>(
       props.containerSelectorToPreventScrollingOnOpen ?? 'main';
     const zIndex = props.zIndex ?? 10000;
     const baseModalZIndex = props.baseModalZIndex ?? 1000;
+    const modalWidthTransition = 'width 150ms cubic-bezier(1, 0, 0.58, 1)';
 
     const portalsContainerRef = useRef<HTMLDivElement>(null);
     const globalNotificationsElementDimensions = useObserverElementDimensions(
@@ -188,10 +189,12 @@ const PortalsContainer = forwardRef<TLayoutRefs, TPortalsContainerProps>(
                 right: 0;
                 bottom: 0;
                 z-index: ${zIndex};
+                transition: ${modalWidthTransition};
               }
 
               .ReactModal__Body--open.body__menu-open #${PORTALS_CONTAINER_ID} {
                 width: calc(100% - ${offsetLeftOnExpandedMenu});
+                transition: ${modalWidthTransition};
               }
             `,
             // Apply styles for stacking layers.