Merge pull request #8656 from marmelab/fix-simpleform-mobile

Fix Save tool bar hiding content on mobile

Author: slax57

examples/simple/src/posts/PostCreate.tsx

@@ -51,6 +51,7 @@ const PostCreateToolbar = props => {
                         redirect('show', 'posts', data.id);
                     },
                 }}
+                sx={{ display: { xs: 'none', sm: 'flex' } }}
             />
             <SaveButton
                 label="post.action.save_and_add"
@@ -81,6 +82,7 @@ const PostCreateToolbar = props => {
                     },
                 }}
                 transform={data => ({ ...data, average_note: 10 })}
+                sx={{ display: { xs: 'none', sm: 'flex' } }}
             />
         </Toolbar>
     );

packages/ra-ui-materialui/src/form/SimpleForm.tsx

@@ -3,6 +3,8 @@ import { ReactElement, ReactNode } from 'react';
 import PropTypes from 'prop-types';
 import { Form, FormProps } from 'ra-core';
 import { Stack, CardContent, SxProps, StackProps } from '@mui/material';
+import { styled } from '@mui/material/styles';
+
 import { Toolbar } from './Toolbar';
 
 /**
@@ -76,11 +78,17 @@ export interface SimpleFormProps
     sx?: SxProps;
 }
 
-const DefaultComponent = ({ children, sx, className }) => (
-    <CardContent sx={sx} className={className}>
-        {children}
-    </CardContent>
-);
+const PREFIX = 'RaSimpleForm';
+
+const DefaultComponent = styled(CardContent, {
+    name: PREFIX,
+    overridesResolver: (props, styles) => styles.root,
+})(({ theme }) => ({
+    [theme.breakpoints.down('sm')]: {
+        paddingBottom: '5em',
+    },
+}));
+
 const DefaultToolbar = <Toolbar />;
 
 const sanitizeRestProps = ({