refactor: remove disableOverflow prop from Modal instances

Author: F-OBrien

src/components/AssetDetailsModal/index.tsx

@@ -1,7 +1,7 @@
 import { Asset } from '@polymeshassociation/polymesh-sdk/types';
 import { useAssetDetails } from '~/hooks/polymesh/useAssetDetails';
-import Modal from '../Modal';
 import { AssetDetailsCard } from '../AssetDetailsCard';
+import Modal from '../Modal';
 
 interface IAssetDetailsModalProps {
   asset: string | Asset;
@@ -14,7 +14,7 @@ export const AssetDetailsModal: React.FC<IAssetDetailsModalProps> = ({
   const { assetDetails, assetDetailsLoading } = useAssetDetails(asset);
 
   return (
-    <Modal handleClose={toggleModal} customWidth="780px" disableOverflow>
+    <Modal handleClose={toggleModal} customWidth="780px">
       <AssetDetailsCard
         assetDetailsLoading={assetDetailsLoading}
         assetDetails={assetDetails}

src/components/CookieDeclarationModal/index.tsx

@@ -2,8 +2,8 @@ import { useEffect, useRef, useState } from 'react';
 import { useTheme } from 'styled-components';
 import Modal from '~/components/Modal';
 import { useWindowWidth } from '~/hooks/utility';
-import { setCookiebotThemeProperties } from '~/utils/cookiebotTheme';
 import { isCookiebotEnabled } from '~/utils/cookiebot';
+import { setCookiebotThemeProperties } from '~/utils/cookiebotTheme';
 import { Button, Heading } from '../UiKit';
 import { StyledButtonsWrapper, StyledModalContent } from './styles';
 
@@ -171,12 +171,7 @@ const CookieDeclarationModal: React.FC<ICookieDeclarationModalProps> = ({
   if (!isOpen || !isDeclarationReady) return null;
 
   return (
-    <Modal
-      handleClose={onClose}
-      customWidth="fit-content"
-      disableOverflow
-      flexLayout
-    >
+    <Modal handleClose={onClose} customWidth="fit-content" flexLayout>
       <Heading type="h2" marginBottom={12}>
         Cookie Declaration
       </Heading>

src/components/Modal/index.tsx

@@ -2,7 +2,7 @@ import { useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { useWindowWidth } from '~/hooks/utility';
 import Icon from '../Icon';
-import { StyledBackdrop, StyledModal, StyledCloseButton } from './styles';
+import { StyledBackdrop, StyledCloseButton, StyledModal } from './styles';
 
 interface KeyboardEvent {
   key: string;
@@ -11,7 +11,6 @@ interface KeyboardEvent {
 interface IModalProps {
   handleClose: () => void | React.ReactEventHandler | React.ChangeEventHandler;
   children: React.ReactNode;
-  disableOverflow?: boolean;
   customWidth?: string;
   flexLayout?: boolean;
 }
@@ -21,7 +20,6 @@ const modalRoot = document.getElementById('modal-root') as Element;
 const Modal: React.FC<IModalProps> = ({
   handleClose,
   children,
-  disableOverflow,
   customWidth,
   flexLayout,
 }) => {
@@ -58,11 +56,7 @@ const Modal: React.FC<IModalProps> = ({
 
   return createPortal(
     <StyledBackdrop onMouseDown={handleBackdropClick}>
-      <StyledModal
-        $disableOverflow={disableOverflow}
-        $customWidth={customWidth}
-        $flexLayout={flexLayout}
-      >
+      <StyledModal $customWidth={customWidth} $flexLayout={flexLayout}>
         {isMobile && (
           <StyledCloseButton onClick={handleClose}>
             <Icon name="CloseIcon" size="24px" />

src/components/Modal/styles.ts

@@ -28,7 +28,6 @@ export const StyledBackdrop = styled.div`
 `;
 
 export const StyledModal = styled.div<{
-  $disableOverflow?: boolean;
   $customWidth?: string;
   $flexLayout?: boolean;
 }>`
@@ -45,12 +44,13 @@ export const StyledModal = styled.div<{
       $customWidth ? `${$customWidth}` : '400px'};
     max-width: ${({ $customWidth }) =>
       $customWidth ? `${$customWidth}` : '504px'};
+    min-height: 200px;
     max-height: 80vh;
     border-radius: 8px;
   }
   background-color: ${({ theme }) => theme.colors.modalBackground};
   box-shadow: ${({ theme }) => `0px 20px 40px ${theme.colors.shadow}`};
-  ${({ $disableOverflow }) => ($disableOverflow ? '' : `overflow-y: auto;`)}
+  overflow-y: auto;
 
   animation: modal-animation 250ms ease-out;
   @keyframes modal-animation {

src/components/UserAuth/components/PopupWelcome/index.tsx

@@ -28,7 +28,7 @@ export const PopupWelcome = () => {
     return null;
   }
   return (
-    <Modal handleClose={() => {}} disableOverflow customWidth="fit-content">
+    <Modal handleClose={() => {}} customWidth="fit-content">
       <StyledWelcomeWrapper>
         <StyledWelcomePopup>
           <h3>Welcome to Polymesh!</h3>

src/layouts/Authorizations/components/AddNewAuth/index.tsx

@@ -156,20 +156,21 @@ export const AddNewAuth: React.FC<IAddNewAuthProps> = ({ toggleModal }) => {
       <Text bold marginBottom={3}>
         Authorization Type
       </Text>
-      <StyledTypeSelectWrapper ref={typeRef}>
-        <StyledTypeSelect
-          onClick={handleTypeDropdownToggle}
-          $expanded={typeDropdownExpanded}
-          $isSelected={!!selectedAuthType}
-        >
-          <span>
-            {selectedAuthType
-              ? splitCamelCase(selectedAuthType)
-              : 'Select Authorization Type'}
-          </span>
-
-          <Icon name="ExpandIcon" size="18px" />
-        </StyledTypeSelect>
+      <div ref={typeRef}>
+        <StyledTypeSelectWrapper>
+          <StyledTypeSelect
+            onClick={handleTypeDropdownToggle}
+            $expanded={typeDropdownExpanded}
+            $isSelected={!!selectedAuthType}
+          >
+            <span>
+              {selectedAuthType
+                ? splitCamelCase(selectedAuthType)
+                : 'Select Authorization Type'}
+            </span>
+            <Icon name="ExpandIcon" size="18px" />
+          </StyledTypeSelect>
+        </StyledTypeSelectWrapper>
         {typeDropdownExpanded && (
           <StyledExpandedTypeSelect>
             {Object.values(AuthorizationType)
@@ -195,7 +196,7 @@ export const AddNewAuth: React.FC<IAddNewAuthProps> = ({ toggleModal }) => {
               ))}
           </StyledExpandedTypeSelect>
         )}
-      </StyledTypeSelectWrapper>
+      </div>
       {selectedAuthType === 'RotatePrimaryKey' && (
         <StyledWarningMessage>
           Caution: This will remove the current primary key from your identity

src/layouts/Authorizations/components/AddNewAuth/styles.ts

@@ -32,17 +32,16 @@ export const StyledTypeSelect = styled.div<{
 `;
 
 export const StyledExpandedTypeSelect = styled.div`
-  position: absolute;
-  top: 110%;
-  left: 0;
+  display: flex;
+  flex-direction: column;
   width: 100%;
+  margin-top: 4px;
   padding: 8px;
   max-height: 200px;
   background-color: ${({ theme }) => theme.colors.landingBackground};
   border: 1px solid #8f8f8f;
   border-radius: 8px;
-  overflow-y: scroll;
-  z-index: 1;
+  overflow-y: auto;
   box-shadow: 0px 20px 40px ${({ theme }) => theme.colors.shadow};
 `;
 

src/layouts/Settings/components/DefaultAddress/index.tsx

@@ -79,7 +79,7 @@ export const DefaultAddress = () => {
         )}
       </StyledValue>
       {addressSelectExpanded && (
-        <Modal handleClose={toggleModal} disableOverflow>
+        <Modal handleClose={toggleModal}>
           <Heading type="h4" marginBottom={48}>
             Default Wallet Address
           </Heading>

src/layouts/Transfers/components/TransfersHeader/components/CreateVenue/index.tsx

@@ -55,7 +55,7 @@ export const CreateVenue: React.FC<ICreateVenueProps> = ({ toggleModal }) => {
     }
   };
   return (
-    <Modal handleClose={toggleModal} disableOverflow>
+    <Modal handleClose={toggleModal}>
       <Heading type="h4" marginBottom={32}>
         Create New Venue
       </Heading>