@strapi/admin 4.7.1 → 4.7.2-exp.175f7ac70ee76d6c825e4429e15fc85ee78d23bb

package/admin/src/pages/AuthPage/components/ResetPassword/index.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { Formik } from 'formik';
 import { Form, Link } from '@strapi/helper-plugin';
-import { Box, Stack, Main, Flex, Button, TextInput, Typography } from '@strapi/design-system';
+import { Box, Main, Flex, Button, TextInput, Typography } from '@strapi/design-system';
 import { EyeStriked, Eye } from '@strapi/icons';
 import UnauthenticatedLayout, {
   Column,
@@ -65,7 +65,7 @@ const ForgotPassword = ({ onSubmit, schema }) => {
                   )}
                 </Column>
 
-                <Stack spacing={6}>
+                <Flex direction="column" alignItems="stretch" gap={6}>
                   <PasswordInput
                     name="password"
                     onChange={handleChange}
@@ -157,7 +157,7 @@ const ForgotPassword = ({ onSubmit, schema }) => {
                       defaultMessage: 'Change password',
                     })}
                   </Button>
-                </Stack>
+                </Flex>
               </Form>
             )}
           </Formik>

package/admin/src/pages/HomePage/ContentBlocks.js

@@ -2,7 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 import { useIntl } from 'react-intl';
 import { ContentBox, useTracking } from '@strapi/helper-plugin';
-import { Stack } from '@strapi/design-system';
+import { Flex } from '@strapi/design-system';
 import { InformationSquare, CodeSquare, PlaySquare, FeatherSquare } from '@strapi/icons';
 import CloudBox from './CloudBox';
 
@@ -19,7 +19,7 @@ const ContentBlocks = () => {
   };
 
   return (
-    <Stack spacing={5}>
+    <Flex direction="column" alignItems="stretch" gap={5}>
       <CloudBox />
       <BlockLink
         href="https://strapi.io/resource-center"
@@ -97,7 +97,7 @@ const ContentBlocks = () => {
           iconBackground="alternative100"
         />
       </BlockLink>
-    </Stack>
+    </Flex>
   );
 };
 

package/admin/src/pages/HomePage/HomeHeader.js

@@ -2,7 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { Typography, Stack, Box, Button } from '@strapi/design-system';
+import { Typography, Box, Button, Flex } from '@strapi/design-system';
 import { Link } from '@strapi/design-system/v2';
 import { ArrowRight } from '@strapi/icons';
 
@@ -10,17 +10,13 @@ const WordWrap = styled(Typography)`
   word-break: break-word;
 `;
 
-const StackCustom = styled(Stack)`
-  align-items: flex-start;
-`;
-
 const HomeHeader = ({ hasCreatedContentType, onCreateCT }) => {
   const { formatMessage } = useIntl();
 
   return (
     <div>
       <Box paddingLeft={6} paddingBottom={10}>
-        <StackCustom spacing={5}>
+        <Flex direction="column" alignItems="flex-start" gap={5}>
           <Typography as="h1" variant="alpha">
             {hasCreatedContentType
               ? formatMessage({
@@ -60,7 +56,7 @@ const HomeHeader = ({ hasCreatedContentType, onCreateCT }) => {
               })}
             </Button>
           )}
-        </StackCustom>
+        </Flex>
       </Box>
     </div>
   );

package/admin/src/pages/HomePage/SocialLinks.js

@@ -7,7 +7,7 @@ import React from 'react';
 import styled from 'styled-components';
 import { useIntl } from 'react-intl';
 import { useAppInfos } from '@strapi/helper-plugin';
-import { Typography, Box, Stack, Grid, GridItem } from '@strapi/design-system';
+import { Typography, Box, Flex, Grid, GridItem } from '@strapi/design-system';
 import { Link, LinkButton } from '@strapi/design-system/v2';
 import { ExternalLink, Github, Discord, Reddit, Strapi, Twitter, Discourse } from '@strapi/icons';
 
@@ -160,8 +160,8 @@ const SocialLinks = () => {
       shadow="tableShadow"
     >
       <Box paddingBottom={7}>
-        <Stack spacing={5}>
-          <Stack spacing={3}>
+        <Flex direction="column" alignItems="stretch" gap={5}>
+          <Flex direction="column" alignItems="stretch" gap={3}>
             <Typography variant="delta" as="h2" id="join-the-community">
               {formatMessage({
                 id: 'app.components.HomePage.community',
@@ -175,14 +175,14 @@ const SocialLinks = () => {
                   'Discuss with team members, contributors and developers on different channels',
               })}
             </Typography>
-          </Stack>
+          </Flex>
           <Link href="https://feedback.strapi.io/" isExternal endIcon={<ExternalLink />}>
             {formatMessage({
               id: 'app.components.HomePage.roadmap',
               defaultMessage: 'See our road map',
             })}
           </Link>
-        </Stack>
+        </Flex>
       </Box>
       <GridGap>
         {socialLinksExtended.map(({ icon, link, name }) => {

package/admin/src/pages/MarketplacePage/components/NpmPackageCard/PackageStats.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { useIntl } from 'react-intl';
-import { Typography, Icon, Divider, Stack } from '@strapi/design-system';
+import { Typography, Icon, Divider, Flex } from '@strapi/design-system';
 import { Github, Download, Star } from '@strapi/icons';
 import { pxToRem } from '@strapi/helper-plugin';
 
@@ -15,7 +15,7 @@ const PackageStats = ({ githubStars, npmDownloads, npmPackageType }) => {
   const { formatMessage } = useIntl();
 
   return (
-    <Stack horizontal spacing={1}>
+    <Flex gap={1}>
       {!!githubStars && (
         <>
           <Icon as={Github} height={pxToRem(12)} width={pxToRem(12)} aria-hidden />
@@ -56,7 +56,7 @@ const PackageStats = ({ githubStars, npmDownloads, npmPackageType }) => {
           {npmDownloads}
         </Typography>
       </p>
-    </Stack>
+    </Flex>
   );
 };
 

package/admin/src/pages/MarketplacePage/components/NpmPackageCard/index.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 import pluralize from 'pluralize';
-import { Box, Stack, Typography, Flex, Icon, Tooltip } from '@strapi/design-system';
+import { Box, Typography, Flex, Icon, Tooltip } from '@strapi/design-system';
 import { LinkButton } from '@strapi/design-system/v2';
 import { ExternalLink, CheckCircle } from '@strapi/icons';
 import { useTracking } from '@strapi/helper-plugin';
@@ -117,7 +117,7 @@ const NpmPackageCard = ({
         </Box>
       </Box>
 
-      <Stack horizontal spacing={2} style={{ alignSelf: 'flex-end' }} paddingTop={6}>
+      <Flex gap={2} style={{ alignSelf: 'flex-end' }} paddingTop={6}>
         <LinkButton
           size="S"
           href={npmPackageHref}
@@ -146,7 +146,7 @@ const NpmPackageCard = ({
           strapiPeerDepVersion={attributes.strapiVersion}
           pluginName={attributes.name}
         />
-      </Stack>
+      </Flex>
     </Flex>
   );
 };

package/admin/src/pages/MarketplacePage/components/NpmPackagesFilters/FiltersPopover.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Box, Popover, Stack, FocusTrap } from '@strapi/design-system';
+import { Box, Popover, Flex, FocusTrap } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
 import FilterSelect from './FilterSelect';
 
@@ -19,7 +19,7 @@ const FiltersPopover = ({
   return (
     <Popover source={source} padding={3} spacing={4} onBlur={() => {}}>
       <FocusTrap onEscape={onToggle}>
-        <Stack spacing={1}>
+        <Flex direction="column" alignItems="stretch" gap={1}>
           <Box>
             <FilterSelect
               message={formatMessage({
@@ -73,7 +73,7 @@ const FiltersPopover = ({
               />
             </Box>
           )}
-        </Stack>
+        </Flex>
       </FocusTrap>
     </Popover>
   );

package/admin/src/pages/ProfilePage/index.js

@@ -26,7 +26,7 @@ import {
   Button,
   Grid,
   GridItem,
-  Stack,
+  Flex,
   useNotifyAT,
   Select,
   Option,
@@ -208,7 +208,7 @@ const ProfilePage = () => {
               />
               <Box paddingBottom={10}>
                 <ContentLayout>
-                  <Stack spacing={6}>
+                  <Flex direction="column" alignItems="stretch" gap={6}>
                     <Box
                       background="neutral0"
                       hasRadius
@@ -218,7 +218,7 @@ const ProfilePage = () => {
                       paddingLeft={7}
                       paddingRight={7}
                     >
-                      <Stack spacing={4}>
+                      <Flex direction="column" alignItems="stretch" gap={4}>
                         <Typography variant="delta" as="h2">
                           {formatMessage({
                             id: 'global.profile',
@@ -278,7 +278,7 @@ const ProfilePage = () => {
                             />
                           </GridItem>
                         </Grid>
-                      </Stack>
+                      </Flex>
                     </Box>
                     <Box
                       background="neutral0"
@@ -289,7 +289,7 @@ const ProfilePage = () => {
                       paddingLeft={7}
                       paddingRight={7}
                     >
-                      <Stack spacing={4}>
+                      <Flex direction="column" alignItems="stretch" gap={4}>
                         <Typography variant="delta" as="h2">
                           {formatMessage({
                             id: 'global.change-password',
@@ -427,7 +427,7 @@ const ProfilePage = () => {
                             />
                           </GridItem>
                         </Grid>
-                      </Stack>
+                      </Flex>
                     </Box>
                     <Box
                       background="neutral0"
@@ -438,8 +438,8 @@ const ProfilePage = () => {
                       paddingLeft={7}
                       paddingRight={7}
                     >
-                      <Stack spacing={4}>
-                        <Stack spacing={1}>
+                      <Flex direction="column" alignItems="stretch" gap={4}>
+                        <Flex direction="column" alignItems="stretch" gap={1}>
                           <Typography variant="delta" as="h2">
                             {formatMessage({
                               id: 'Settings.profile.form.section.experience.title',
@@ -469,7 +469,7 @@ const ProfilePage = () => {
                               }
                             )}
                           </Typography>
-                        </Stack>
+                        </Flex>
                         <Grid gap={5}>
                           <GridItem s={12} col={6}>
                             <Select
@@ -553,9 +553,9 @@ const ProfilePage = () => {
                             </Select>
                           </GridItem>
                         </Grid>
-                      </Stack>
+                      </Flex>
                     </Box>
-                  </Stack>
+                  </Flex>
                 </ContentLayout>
               </Box>
             </Form>

package/admin/src/pages/SettingsPage/components/Tokens/FormHead/index.js

@@ -3,7 +3,7 @@ import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
 import { Link } from '@strapi/helper-plugin';
 import { ArrowLeft, Check } from '@strapi/icons';
-import { Button, HeaderLayout, Stack } from '@strapi/design-system';
+import { Button, HeaderLayout, Flex } from '@strapi/design-system';
 import Regenerate from '../Regenerate';
 
 const FormHead = ({
@@ -29,7 +29,7 @@ const FormHead = ({
       title={token?.name || formatMessage(title)}
       primaryAction={
         canEditInputs ? (
-          <Stack horizontal spacing={2}>
+          <Flex gap={2}>
             {canRegenerate && token?.id && (
               <Regenerate
                 backUrl={regenerateUrl}
@@ -49,7 +49,7 @@ const FormHead = ({
                 defaultMessage: 'Save',
               })}
             </Button>
-          </Stack>
+          </Flex>
         ) : (
           canRegenerate &&
           token?.id && (

package/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/components/ActionBoundRoutes/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
-import { Typography, Stack, GridItem } from '@strapi/design-system';
+import { Typography, Flex, GridItem } from '@strapi/design-system';
 import BoundRoute from '../BoundRoute';
 import { useApiTokenPermissionsContext } from '../../../../../../../contexts/ApiTokenPermissions';
 
@@ -22,16 +22,16 @@ const ActionBoundRoutes = () => {
       style={{ minHeight: '100%' }}
     >
       {selectedAction ? (
-        <Stack spacing={2}>
+        <Flex direction="column" alignItems="stretch" gap={2}>
           {routes[actionSection]?.map((route) => {
             return route.config.auth?.scope?.includes(selectedAction) ||
               route.handler === selectedAction ? (
               <BoundRoute key={route.handler} route={route} />
             ) : null;
           })}
-        </Stack>
+        </Flex>
       ) : (
-        <Stack spacing={2}>
+        <Flex direction="column" alignItems="stretch" gap={2}>
           <Typography variant="delta" as="h3">
             {formatMessage({
               id: 'Settings.apiTokens.createPage.permissions.header.title',
@@ -45,7 +45,7 @@ const ActionBoundRoutes = () => {
                 "Select the application's actions or the plugin's actions and click on the cog icon to display the bound route",
             })}
           </Typography>
-        </Stack>
+        </Flex>
       )}
     </GridItem>
   );

package/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/components/BoundRoute/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import { Stack, Box, Typography } from '@strapi/design-system';
+import { Flex, Box, Typography } from '@strapi/design-system';
 import map from 'lodash/map';
 import tail from 'lodash/tail';
 import { useIntl } from 'react-intl';
@@ -21,7 +21,7 @@ function BoundRoute({ route }) {
   const colors = getMethodColor(route.method);
 
   return (
-    <Stack spacing={2}>
+    <Flex direction="column" alignItems="stretch" gap={2}>
       <Typography variant="delta" as="h3">
         {formatMessage({
           id: 'Settings.apiTokens.createPage.BoundRoute.title',
@@ -33,7 +33,7 @@ function BoundRoute({ route }) {
           .{action}
         </Typography>
       </Typography>
-      <Stack horizontal hasRadius background="neutral0" borderColor="neutral200" spacing={0}>
+      <Flex hasRadius background="neutral0" borderColor="neutral200" gap={0}>
         <MethodBox background={colors.background} borderColor={colors.border} padding={2}>
           <Typography fontWeight="bold" textColor={colors.text}>
             {method}
@@ -46,8 +46,8 @@ function BoundRoute({ route }) {
             </Typography>
           ))}
         </Box>
-      </Stack>
-    </Stack>
+      </Flex>
+    </Flex>
   );
 }
 

package/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/components/FormApiTokenContainer/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
-import { Box, Grid, GridItem, Stack, Typography } from '@strapi/design-system';
+import { Box, Grid, GridItem, Flex, Typography } from '@strapi/design-system';
 import LifeSpanInput from '../../../../../components/Tokens/LifeSpanInput';
 import TokenName from '../../../../../components/Tokens/TokenName';
 import TokenDescription from '../../../../../components/Tokens/TokenDescription';
@@ -68,7 +68,7 @@ const FormApiTokenContainer = ({
       paddingLeft={7}
       paddingRight={7}
     >
-      <Stack spacing={4}>
+      <Flex direction="column" alignItems="stretch" gap={4}>
         <Typography variant="delta" as="h2">
           {formatMessage({
             id: 'global.details',
@@ -119,7 +119,7 @@ const FormApiTokenContainer = ({
             />
           </GridItem>
         </Grid>
-      </Stack>
+      </Flex>
     </Box>
   );
 };

package/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/components/Permissions/index.js

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 import { useIntl } from 'react-intl';
-import { Typography, Stack, Grid, GridItem } from '@strapi/design-system';
+import { Typography, Flex, Grid, GridItem } from '@strapi/design-system';
 import ContentTypesSection from '../ContenTypesSection';
 import ActionBoundRoutes from '../ActionBoundRoutes';
 import { useApiTokenPermissionsContext } from '../../../../../../../contexts/ApiTokenPermissions';
@@ -14,7 +14,7 @@ const Permissions = ({ ...props }) => {
   return (
     <Grid gap={0} shadow="filterShadow" hasRadius background="neutral0">
       <GridItem col={7} paddingTop={6} paddingBottom={6} paddingLeft={7} paddingRight={7}>
-        <Stack spacing={2}>
+        <Flex direction="column" alignItems="stretch" gap={2}>
           <Typography variant="delta" as="h2">
             {formatMessage({
               id: 'Settings.apiTokens.createPage.permissions.title',
@@ -27,7 +27,7 @@ const Permissions = ({ ...props }) => {
               defaultMessage: 'Only actions bound by a route are listed below.',
             })}
           </Typography>
-        </Stack>
+        </Flex>
         {data?.permissions && <ContentTypesSection section={data?.permissions} {...props} />}
       </GridItem>
       <ActionBoundRoutes />

package/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/index.js

@@ -11,7 +11,7 @@ import {
   useRBAC,
   useFetchClient,
 } from '@strapi/helper-plugin';
-import { Main, ContentLayout, Stack } from '@strapi/design-system';
+import { Main, ContentLayout, Flex } from '@strapi/design-system';
 import { Formik } from 'formik';
 import { useRouteMatch, useHistory } from 'react-router-dom';
 import { useQuery } from 'react-query';
@@ -302,7 +302,7 @@ const ApiTokenCreateView = () => {
                 />
 
                 <ContentLayout>
-                  <Stack spacing={6}>
+                  <Flex direction="column" alignItems="stretch" gap={6}>
                     {Boolean(apiToken?.name) && (
                       <TokenBox token={apiToken?.accessKey} tokenType={API_TOKEN_TYPE} />
                     )}
@@ -323,7 +323,7 @@ const ApiTokenCreateView = () => {
                         values?.type === 'full-access'
                       }
                     />
-                  </Stack>
+                  </Flex>
                 </ContentLayout>
               </Form>
             );

package/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoModalStepper/FromComputerForm.js

@@ -4,7 +4,6 @@ import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 import {
   Box,
-  Stack,
   Flex,
   Icon,
   Typography,
@@ -81,7 +80,7 @@ const FromComputerForm = ({ setLocalImage, goTo, next, onClose }) => {
         <Box paddingLeft={8} paddingRight={8} paddingTop={6} paddingBottom={6}>
           <Field name="logo-upload" error={fileError}>
             <label htmlFor="logo-upload">
-              <Stack spacing={2}>
+              <Flex direction="column" alignItems="stretch" gap={2}>
                 <Flex
                   paddingTop={9}
                   paddingBottom={7}
@@ -147,7 +146,7 @@ const FromComputerForm = ({ setLocalImage, goTo, next, onClose }) => {
                   </Box>
                 </Flex>
                 <FieldError />
-              </Stack>
+              </Flex>
             </label>
           </Field>
         </Box>

package/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/index.js

@@ -19,7 +19,6 @@ import {
   Layout,
   Link,
   Main,
-  Stack,
   Typography,
 } from '@strapi/design-system';
 import { ExternalLink, Check } from '@strapi/icons';
@@ -114,9 +113,11 @@ const ApplicationInfosPage = () => {
             }
           />
           <ContentLayout>
-            <Stack spacing={6}>
-              <Stack
-                spacing={4}
+            <Flex direction="column" alignItems="stretch" gap={6}>
+              <Flex
+                direction="column"
+                alignItems="stretch"
+                gap={4}
                 hasRadius
                 background="neutral0"
                 shadow="tableShadow"
@@ -198,7 +199,7 @@ const ApplicationInfosPage = () => {
                   </GridItem>
                   <AdminSeatInfo />
                 </Grid>
-              </Stack>
+              </Flex>
               {canRead && data && (
                 <CustomizationInfos
                   canUpdate={canUpdate}
@@ -206,7 +207,7 @@ const ApplicationInfosPage = () => {
                   projectSettingsStored={data}
                 />
               )}
-            </Stack>
+            </Flex>
           </ContentLayout>
         </form>
       </Main>

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/GlobalActions/index.js

@@ -1,6 +1,6 @@
 import React, { memo, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { BaseCheckbox, Box, Stack, Typography } from '@strapi/design-system';
+import { BaseCheckbox, Box, Flex, Typography } from '@strapi/design-system';
 import styled from 'styled-components';
 import get from 'lodash/get';
 import IS_DISABLED from 'ee_else_ce/pages/SettingsPage/pages/Roles/EditPage/components/GlobalActions/utils/constants';
@@ -9,9 +9,7 @@ import { usePermissionsDataManager } from '../../../../../../../hooks';
 import { cellWidth, firstRowWidth } from '../Permissions/utils/constants';
 import { findDisplayedActions, getCheckboxesState } from './utils';
 
-const CenteredStack = styled(Stack)`
-  align-items: center;
-  justify-content: center;
+const CenteredStack = styled(Flex)`
   width: ${cellWidth};
   flex-shrink: 0;
 `;
@@ -30,7 +28,7 @@ const GlobalActions = ({ actions, isFormDisabled, kind }) => {
 
   return (
     <Box paddingBottom={4} paddingTop={6} style={{ paddingLeft: firstRowWidth }}>
-      <Stack horizontal spacing={0}>
+      <Flex alignItems="center" justifyContent="center" gap={0}>
         {displayedActions.map(({ label, actionId }) => {
           return (
             <CenteredStack key={actionId} spacing={3}>
@@ -64,7 +62,7 @@ const GlobalActions = ({ actions, isFormDisabled, kind }) => {
             </CenteredStack>
           );
         })}
-      </Stack>
+      </Flex>
     </Box>
   );
 };

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/RoleForm/index.js

@@ -4,7 +4,6 @@ import {
   Grid,
   GridItem,
   Flex,
-  Stack,
   Typography,
   Textarea,
   TextInput,
@@ -18,7 +17,7 @@ const RoleForm = ({ disabled, role, values, errors, onChange, onBlur }) => {
 
   return (
     <Box background="neutral0" padding={6} shadow="filterShadow" hasRadius>
-      <Stack spacing={4}>
+      <Flex direction="column" alignItems="stretch" gap={4}>
         <Flex justifyContent="space-between">
           <Box>
             <Box>
@@ -84,7 +83,7 @@ const RoleForm = ({ disabled, role, values, errors, onChange, onBlur }) => {
             </Textarea>
           </GridItem>
         </Grid>
-      </Stack>
+      </Flex>
     </Box>
   );
 };

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/index.js

@@ -8,7 +8,7 @@ import {
   SettingsPageTitle,
   Link,
 } from '@strapi/helper-plugin';
-import { Box, Button, ContentLayout, HeaderLayout, Main, Stack } from '@strapi/design-system';
+import { Box, Button, ContentLayout, HeaderLayout, Main, Flex } from '@strapi/design-system';
 import { Formik } from 'formik';
 import { ArrowLeft } from '@strapi/icons';
 import get from 'lodash/get';
@@ -104,7 +104,7 @@ const EditPage = () => {
           <form onSubmit={handleSubmit}>
             <HeaderLayout
               primaryAction={
-                <Stack horizontal spacing={2}>
+                <Flex gap={2}>
                   <Button
                     disabled={role.code === 'strapi-super-admin'}
                     onClick={handleSubmit}
@@ -116,7 +116,7 @@ const EditPage = () => {
                       defaultMessage: 'Save',
                     })}
                   </Button>
-                </Stack>
+                </Flex>
               }
               title={formatMessage({
                 id: 'Settings.roles.edit.title',
@@ -136,7 +136,7 @@ const EditPage = () => {
               }
             />
             <ContentLayout>
-              <Stack spacing={6}>
+              <Flex direction="column" alignItems="stretch" gap={6}>
                 <RoleForm
                   isLoading={isRoleLoading}
                   disabled={isFormDisabled}
@@ -160,7 +160,7 @@ const EditPage = () => {
                     <LoadingIndicatorPage />
                   </Box>
                 )}
-              </Stack>
+              </Flex>
             </ContentLayout>
           </form>
         )}