Fixed issue with modals containing invalid/redundant scrolls (#1240)

* fixed conflicts

* added improvements

* added changes

* deleting theme

* Update CHANGELOG.md

CHANGELOG.md

@@ -73,6 +73,8 @@ All notable, unreleased changes to this project will be documented in this file.
 - Add Metadata for Sale & Voucher - #7653 by @piotrgrundas
 - Add variant create options dialog - #1238 by @orzechdev
 - Fix for errors on changing channel availability - #1264 by @krzysztofwolski
+- Fixed navigation menu items reordering issue - #1239 by @kamilpastuszka
+- Fixed issue with modals containing invalid, redundant scrolls #1240 by @kamilpastuszka
 - Add text attribute for product and page translations - #1276 by @kamilpastuszka
 
 # 2.11.1

src/channels/components/ChannelsWithVariantsAvailabilityDialog/ChannelsWithVariantsAvailabilityDialogContent.tsx

@@ -75,7 +75,8 @@ const useSummaryStyles = makeStyles(
       height: theme.spacing(10),
       padding: 0,
       margin: 0,
-      minHeight: 0
+      minHeight: 0,
+      paddingRight: theme.spacing(2.5)
     },
     content: {
       margin: 0

src/components/AssignAttributeDialog/AssignAttributeDialog.tsx

@@ -50,8 +50,15 @@ const useStyles = makeStyles(
       height: theme.spacing(3),
       justifyContent: "center"
     },
+    searchArea: {
+      marginBottom: theme.spacing(3),
+      overflowY: "hidden",
+      paddingBottom: theme.spacing(6)
+    },
     scrollArea: {
-      overflowY: "scroll"
+      overflowY: "scroll",
+      paddingTop: 0,
+      marginBottom: theme.spacing(3)
     },
     wideCell: {
       width: "100%"
@@ -110,7 +117,7 @@ const AssignAttributeDialog: React.FC<AssignAttributeDialogProps> = ({
           description="dialog header"
         />
       </DialogTitle>
-      <DialogContent>
+      <DialogContent className={classes.searchArea}>
         <TextField
           name="query"
           value={query}

src/components/ChannelsAvailabilityDialogWrapper/ChannelsAvailabilityDialogWrapper.tsx

@@ -33,7 +33,9 @@ export const useStyles = makeStyles(
     },
     scrollArea: {
       maxHeight: 400,
-      overflowY: "scroll"
+      overflowY: "scroll",
+      overflowX: "hidden",
+      marginBottom: theme.spacing(3)
     },
     text: {
       marginBottom: 5

src/components/ResponsiveTable/ResponsiveTable.tsx

@@ -13,7 +13,7 @@ const useStyles = makeStyles(
       "& table": {
         tableLayout: "auto"
       },
-      overflowX: "auto",
+      overflowX: "hidden",
       width: "100%"
     }
   }),

src/discounts/components/DiscountCountrySelectDialog/DiscountCountrySelectDialog.tsx

@@ -46,11 +46,16 @@ const useStyles = makeStyles(
     checkboxCell: {
       paddingLeft: 0
     },
+    containerTitle: {
+      padding: theme.spacing(1.25, 0)
+    },
     container: {
-      maxHeight: 500
+      maxHeight: 500,
+      paddingTop: 0,
+      marginBottom: theme.spacing(3)
     },
     heading: {
-      marginBottom: theme.spacing(2),
+      marginBottom: theme.spacing(1),
       marginTop: theme.spacing(2)
     },
     wideCell: {
@@ -117,13 +122,16 @@ const DiscountCountrySelectDialog: React.FC<DiscountCountrySelectDialogProps> =
                 />
               </DialogContent>
               <Hr />
-              <DialogContent className={classes.container}>
+
+              <DialogContent className={classes.containerTitle}>
                 <Typography className={classes.heading} variant="subtitle1">
                   <FormattedMessage
                     defaultMessage="Countries A to Z"
                     description="country selection"
                   />
                 </Typography>
+              </DialogContent>
+              <DialogContent className={classes.container}>
                 <ResponsiveTable>
                   <TableBody>
                     {filter(countries, data.query, {

src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx

@@ -50,7 +50,9 @@ const useStyles = makeStyles(
       padding: 0
     },
     content: {
-      overflowY: "scroll"
+      overflowY: "scroll",
+      paddingTop: 0,
+      marginBottom: theme.spacing(3)
     },
     grayText: {
       color: theme.palette.text.disabled
@@ -63,7 +65,12 @@ const useStyles = makeStyles(
       marginTop: theme.spacing(3)
     },
     overflow: {
-      overflowY: "visible"
+      overflowY: "hidden"
+    },
+    topArea: {
+      overflowY: "hidden",
+      paddingBottom: theme.spacing(6),
+      margin: theme.spacing(0, 3, 3, 3)
     },
     productCheckboxCell: {
       "&:first-child": {
@@ -250,7 +257,7 @@ const OrderProductAddDialog: React.FC<OrderProductAddDialogProps> = props => {
           description="dialog header"
         />
       </DialogTitle>
-      <DialogContent className={classes.overflow} data-test-id="searchQuery">
+      <DialogContent className={classes.topArea} data-test-id="searchQuery">
         <TextField
           name="query"
           value={query}

src/shipping/components/ShippingZoneCountriesAssignDialog/ShippingZoneCountriesAssignDialog.tsx

@@ -46,13 +46,18 @@ const useStyles = makeStyles(
     checkboxCell: {
       paddingLeft: 0
     },
-    container: {
-      maxHeight: 400
-    },
     heading: {
       marginBottom: theme.spacing(2),
       marginTop: theme.spacing(2)
     },
+    container: {
+      padding: theme.spacing(1.25, 0)
+    },
+    scrollAreaContainer: {
+      maxHeight: 400,
+      padding: theme.spacing(1.25, 0),
+      marginBottom: theme.spacing(3)
+    },
     table: {
       border: "1px solid " + theme.palette.grey[200]
     },
@@ -161,6 +166,9 @@ const ShippingZoneCountriesAssignDialog: React.FC<ShippingZoneCountriesAssignDia
                     description="country selection"
                   />
                 </Typography>
+              </DialogContent>
+
+              <DialogContent className={classes.scrollAreaContainer}>
                 <ResponsiveTable className={classes.table}>
                   <TableBody>
                     {filter(countries, data.query, {

src/styles/useScrollableDialogStyle.ts

@@ -14,12 +14,14 @@ const useScrollableDialogStyle = makeStyles(
       marginTop: theme.spacing(3)
     },
     topArea: {
-      overflowY: "visible"
+      overflowY: "hidden",
+      marginBottom: theme.spacing(3)
     },
     scrollArea: {
       overflowY: "scroll",
       paddingTop: 0,
-      height: "inherit"
+      height: "inherit",
+      marginBottom: theme.spacing(3)
     }
   }),
   {