Merge pull request #14929 from strapi/fix/configure-the-view-cm-break

CM: Fix ToggleInput wrapping for configure the view

packages/core/admin/admin/src/content-manager/pages/ListSettingsView/components/Settings.js

@@ -1,34 +1,29 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
 import { useIntl } from 'react-intl';
-import { Flex } from '@strapi/design-system/Flex';
+import { Box } from '@strapi/design-system/Box';
 import { Grid, GridItem } from '@strapi/design-system/Grid';
 import { Select, Option } from '@strapi/design-system/Select';
 import { ToggleInput } from '@strapi/design-system/ToggleInput';
-import { Box } from '@strapi/design-system/Box';
+import { Stack } from '@strapi/design-system/Stack';
 import { Typography } from '@strapi/design-system/Typography';
 import { getTrad } from '../../../utils';
 
-const FlexGap = styled(Flex)`
-  gap: ${({ theme }) => theme.spaces[4]};
-`;
-
 const Settings = ({ modifiedData, onChange, sortOptions }) => {
   const { formatMessage } = useIntl();
   const { settings, metadatas } = modifiedData;
 
   return (
-    <>
+    <Stack spacing={4}>
-      <Box paddingBottom={4}>
       <Typography variant="delta" as="h2">
         {formatMessage({
           id: getTrad('containers.SettingPage.settings'),
           defaultMessage: 'Settings',
         })}
       </Typography>
-      </Box>
+
-      <FlexGap justifyContent="space-between" wrap="wrap" paddingBottom={6}>
+      <Stack horizontal justifyContent="space-between" spacing={4}>
+        <Box width="100%">
           <ToggleInput
             label={formatMessage({
               id: getTrad('form.Input.search'),
@@ -48,6 +43,9 @@ const Settings = ({ modifiedData, onChange, sortOptions }) => {
             name="settings.searchable"
             checked={settings.searchable}
           />
+        </Box>
+
+        <Box width="100%">
           <ToggleInput
             label={formatMessage({
               id: getTrad('form.Input.filters'),
@@ -67,6 +65,9 @@ const Settings = ({ modifiedData, onChange, sortOptions }) => {
             name="settings.filterable"
             checked={settings.filterable}
           />
+        </Box>
+
+        <Box width="100%">
           <ToggleInput
             label={formatMessage({
               id: getTrad('form.Input.bulkActions'),
@@ -86,7 +87,9 @@ const Settings = ({ modifiedData, onChange, sortOptions }) => {
             name="settings.bulkable"
             checked={settings.bulkable}
           />
-      </FlexGap>
+        </Box>
+      </Stack>
+
       <Grid gap={4}>
         <GridItem s={12} col={6}>
           <Select
@@ -145,7 +148,7 @@ const Settings = ({ modifiedData, onChange, sortOptions }) => {
           </Select>
         </GridItem>
       </Grid>
-    </>
+    </Stack>
   );
 };