Add scrollable area for user addresses (#1561) (#1564)

* Add scrollable area for user addresses (#1561)

* add scrollable area for user addresses

* fix billing address

* Trigger deployment

src/orders/components/OrderCustomerAddressesEditDialog/OrderCustomerAddressEdit.tsx

@@ -92,7 +92,7 @@ const OrderCustomerAddressEdit: React.FC<OrderCustomerAddressEditProps> = props
         className={classes.optionLabel}
       />
       {addressInputOption === AddressInputOptionEnum.CUSTOMER_ADDRESS && (
-        <>
+        <div className={classes.scrollableWrapper}>
           {customerAddresses.map(customerAddress => (
             <React.Fragment key={customerAddress.id}>
               <CardSpacer />
@@ -104,7 +104,7 @@ const OrderCustomerAddressEdit: React.FC<OrderCustomerAddressEditProps> = props
             </React.Fragment>
           ))}
           <FormSpacer />
-        </>
+        </div>
       )}
       <FormControlLabel
         value={AddressInputOptionEnum.NEW_ADDRESS}

src/orders/components/OrderCustomerAddressesEditDialog/OrderCustomerAddressesEditDialog.tsx

@@ -140,7 +140,7 @@ const OrderCustomerAddressesEditDialog: React.FC<OrderCustomerAddressesEditDialo
             <DialogTitle>
               <FormattedMessage {...dialogMessages.title} />
             </DialogTitle>
-            <DialogContent className={classes.overflow}>
+            <DialogContent className={classes.scrollableContent}>
               <Typography>
                 {customerAddresses.length > 0 ? (
                   <FormattedMessage

src/orders/components/OrderCustomerAddressesEditDialog/styles.ts

@@ -2,6 +2,14 @@ import { makeStyles } from "@saleor/macaw-ui";
 
 export const useStyles = makeStyles(
   {
+    scrollableContent: {
+      maxHeight: `calc(100vh - 250px)`,
+      overflow: "scroll"
+    },
+    scrollableWrapper: {
+      maxHeight: 400,
+      overflow: "scroll"
+    },
     container: {
       display: "block"
     },