App Permissions Modal - QA fixes (#3853)

* Fix App Permissions Modal scrolling

* change changeset to be minor

* fix height of permissions modal - confimration step

.changeset/yellow-impalas-lie.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": minor
+---
+
+Apps: Fixed problem with Permissions Modal that was clipped on smaller screens. Now long permissions list is scrollable.

src/apps/components/AppPermissionsDialog/AppPermissionsDialogConfirmation.tsx

@@ -27,7 +27,7 @@ export const AppPermissionsDialogConfirmation = ({
   const { mapCodesToNames } = useGetAvailableAppPermissions();
 
   return (
-    <Box>
+    <Box __maxHeight={"50vh"} overflow={"auto"}>
       <Text marginBottom={2} as={"p"}>
         {intl.formatMessage(messages.summaryText)}
       </Text>

src/apps/components/AppPermissionsDialog/AppPermissionsDialogPermissionPicker.tsx

@@ -15,6 +15,12 @@ interface AppPermissionsDialogPermissionPickerProps {
   onClose(): void;
 }
 
+/**
+ * Approximate height that clips list and makes it scrollable.
+ * This makes it avaialble on small devices, including horizontal ipad air
+ */
+const LIST_MAX_HEIGHT = "50vh";
+
 export const AppPermissionsDialogPermissionPicker = ({
   onSubmit,
   onChange,
@@ -39,6 +45,7 @@ export const AppPermissionsDialogPermissionPicker = ({
         onChange(values);
       }}
     >
+      <Box overflow={"scroll"} __maxHeight={LIST_MAX_HEIGHT}>
         <List>
           {allPermissions.map(perm => {
             const isAssigned = Boolean(selected.find(p => p === perm.code));
@@ -67,7 +74,8 @@ export const AppPermissionsDialogPermissionPicker = ({
             );
           })}
         </List>
-      <Box display={"flex"} justifyContent={"flex-end"} gap={2}>
+      </Box>
+      <Box display={"flex"} justifyContent={"flex-end"} gap={2} marginTop={2}>
         <Button onClick={onClose} type={"button"} variant={"tertiary"}>
           {intl.formatMessage(messages.closeButton)}
         </Button>