Fix overflowing integrations in app view (#3313)

* Bump lockfile

* Add flex-wrap to integrations

* Add flex-wrap to links

* Move integrations sections to upper card block

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "saleor-dashboard",
-  "version": "3.12.0-dev",
+  "version": "3.13.0-dev",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "saleor-dashboard",
-      "version": "3.12.0-dev",
+      "version": "3.13.0-dev",
       "hasInstallScript": true,
       "license": "BSD-3-Clause",
       "dependencies": {

src/apps/components/AppListCard/AppListCard.tsx

@@ -51,9 +51,9 @@ const AppListCard: React.FC<AppListCardProps> = ({
       <Box>
         <AppListCardDescription app={app} />
         <AppListCardLinks links={details.links} />
+        <AppListCardIntegrations app={app} />
       </Box>
       <Box>
-        <AppListCardIntegrations app={app} />
         <AppListCardActions
           releaseDate={details.releaseDate}
           installationPending={details.installationPending}

src/apps/components/AppListCard/AppListCardIntegrations.tsx

@@ -17,7 +17,7 @@ const AppListCardIntegrations: React.FC<AppListCardIntegrationsProps> = ({
   }
 
   return (
-    <Box as="ul" display="flex" flexDirection="row" gap={8}>
+    <Box as="ul" display="flex" flexDirection="row" flexWrap="wrap" gap={8}>
       {app.integrations.map(integration => (
         <Box
           as="li"

src/apps/components/AppListCard/AppListCardLinks.tsx

@@ -13,7 +13,14 @@ const AppListCardLinks: React.FC<AppListCardLinksProps> = ({ links }) => {
   }
 
   return (
-    <Box as="div" display="flex" flexDirection="row" gap={7} marginBottom={6}>
+    <Box
+      as="div"
+      display="flex"
+      flexDirection="row"
+      flexWrap="wrap"
+      gap={7}
+      marginBottom={6}
+    >
       {links.map(link => (
         <Box as="span" key={link.name}>
           <Text variant="body" size="small" color="textBrandDefault">