fix(Modal): used floatingUI component for modal overlay

livechat · Feb 2, 2024 · 6b1c2b1 · 6b1c2b1
1 parent 58eb0d0
commit 6b1c2b1
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 11 deletions.
diff --git a/packages/react-components/src/components/Modal/Modal.module.scss b/packages/react-components/src/components/Modal/Modal.module.scss
@@ -2,7 +2,6 @@
   display: flex;
   position: relative;
   flex-direction: column;
-  margin: 10px;
   margin: auto;
   border-radius: var(--radius-3);
   box-shadow: 0 20px 60px 0 rgb(0 0 0 / 30%);
@@ -18,18 +17,10 @@
 
   &__overlay {
     display: none;
-    position: fixed;
-    top: 0;
-    left: 0;
-    justify-content: center;
-    z-index: 13000;
     background-color: var(--surface-other-overlay);
-    width: 100%;
-    height: 100%;
 
     &--visible {
       display: flex;
-      overflow-y: auto;
     }
 
     &--labelled {

diff --git a/packages/react-components/src/components/Modal/components/ModalBase.tsx b/packages/react-components/src/components/Modal/components/ModalBase.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 
+import { FloatingOverlay } from '@floating-ui/react';
 import cx from 'clsx';
 
 import { KeyCodes } from '../../../utils/keyCodes';
@@ -69,7 +70,7 @@ export const ModalBase: React.FC<React.PropsWithChildren<ModalBaseProps>> = ({
   };
 
   return (
-    <div
+    <FloatingOverlay
       data-testid="lc-modal-overlay"
       onMouseDown={onOverlayClick}
       className={cx(
@@ -86,6 +87,6 @@ export const ModalBase: React.FC<React.PropsWithChildren<ModalBaseProps>> = ({
       >
         {children}
       </div>
-    </div>
+    </FloatingOverlay>
   );
 };