Fix double scroll issue on add produtct to draft order (#3355)

* Fix double scroll issue on add produtct to draft order

* Fix double scroll approche 2

* Max height 75vh

* Fix rest of scrolls

src/index.css

@@ -44,3 +44,7 @@ body {
 .remove-icon-background svg {
   background: none !important;
 }
+
+[id*="ScrollableDialog"] .infinite-scroll-component {
+  overflow: hidden !important;
+}

src/orders/components/OrderProductAddDialog/styles.ts

@@ -16,8 +16,9 @@ export const useStyles = makeStyles(
       marginBottom: theme.spacing(3),
     },
     content: {
-      overflowY: "scroll",
+      overflowY: "auto",
       paddingTop: 0,
+      maxHeight: "75vh",
       marginBottom: theme.spacing(3),
     },
     subtitle: {

src/permissionGroups/components/AssignMembersDialog/AssignMembersDialog.tsx

@@ -95,12 +95,6 @@ const useStyles = makeStyles(
     overflow: {
       overflowY: "visible",
     },
-    scrollArea: {
-      maxHeight: 400,
-      overflowY: "scroll",
-      paddingTop: 0,
-      paddingBottom: 0,
-    },
     table: {
       marginBottom: theme.spacing(3),
     },
@@ -140,8 +134,6 @@ function handleStaffMemberAssign(
   }
 }
 
-const scrollableTargetId = "assignMembersScrollableDialog";
-
 const AssignMembersDialog: React.FC<AssignMembersDialogProps> = ({
   confirmButtonState,
   disabled,
@@ -194,11 +186,7 @@ const AssignMembersDialog: React.FC<AssignMembersDialogProps> = ({
           disabled={disabled}
         />
       </DialogContent>
-      <DialogContent
+      <DialogContent ref={anchor}>
-        className={classes.scrollArea}
-        ref={anchor}
-        id={scrollableTargetId}
-      >
         <InfiniteScroll
           dataLength={staffMembers?.length || 0}
           next={onFetchMore}
@@ -212,7 +200,7 @@ const AssignMembersDialog: React.FC<AssignMembersDialogProps> = ({
               </div>
             </>
           }
-          scrollableTarget={scrollableTargetId}
+          height={400}
         >
           <ResponsiveTable className={classes.table}>
             <TableBody>

src/shipping/components/ShippingMethodProductsAddDialog/ShippingMethodProductsAddDialog.tsx

@@ -37,10 +37,6 @@ const useStyles = makeStyles(
     colName: {
       paddingLeft: 0,
     },
-    content: {
-      overflowY: "scroll",
-      height: 450,
-    },
     searchBar: {
       marginBottom: theme.spacing(3),
     },
@@ -94,8 +90,6 @@ const handleProductAssign = (
   }
 };
 
-const scrollableTargetId = "shippingMethodProductsAddScrollableDialog";
-
 const ShippingMethodProductsAddDialog: React.FC<
   ShippingMethodProductsAddDialogProps
 > = props => {
@@ -161,7 +155,7 @@ const ShippingMethodProductsAddDialog: React.FC<
             }}
           />
         </div>
-        <div className={classes.content} id={scrollableTargetId}>
+        <div>
           <InfiniteScroll
             dataLength={products?.length}
             next={onFetchMore}
@@ -172,7 +166,7 @@ const ShippingMethodProductsAddDialog: React.FC<
                 <CircularProgress size={16} />
               </div>
             }
-            scrollableTarget={scrollableTargetId}
+            height={450}
           >
             <ResponsiveTable key="table">
               <TableBody>