@applica-software-guru/react-admin 1.0.71 → 1.0.72

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applica-software-guru/react-admin",
-  "version": "1.0.71",
+  "version": "1.0.72",
   "private": false,
   "repository": {
     "type": "git",

package/src/components/@extended/Breadcrumbs.jsx

@@ -93,6 +93,14 @@ const Breadcrumbs = ({
   // item separator
   const SeparatorIcon = separator;
   const separatorIcon = separator ? <SeparatorIcon style={{ fontSize: '0.75rem', marginTop: 2 }} /> : '/';
+  const cardSx = {
+    mb: 2,
+    bgcolor: card === false ? 'transparent' : 'inherit',
+    ...sx,
+    [theme.breakpoints.down('sm')]: {
+      mb: 1
+    }
+  };
 
   let mainContent;
   let itemContent;
@@ -102,13 +110,7 @@ const Breadcrumbs = ({
   let ItemIcon;
   if (mode === 'breadcrumbs') {
     return (
-      <MainCard
-        border={card}
-        sx={card === false ? { mb: 3, bgcolor: 'transparent', ...sx } : { mb: 3, ...sx }}
-        {...others}
-        content={card}
-        shadow="none"
-      >
+      <MainCard border={card} sx={cardSx} {...others} content={card} shadow="none">
         <Grid
           container
           direction={rightAlign ? 'row' : 'column'}
@@ -122,7 +124,16 @@ const Breadcrumbs = ({
             </Grid>
           )}
           <Grid item>
-            <MuiBreadcrumbs aria-label="breadcrumb" maxItems={maxItems || 8} separator={separatorIcon}>
+            <MuiBreadcrumbs
+              aria-label="breadcrumb"
+              maxItems={maxItems || 8}
+              separator={separatorIcon}
+              sx={{
+                [theme.breakpoints.down('sm')]: {
+                  mt: 1
+                }
+              }}
+            >
               {home !== false && (
                 <Typography component={Link} to="/" color="textSecondary" variant="h6" sx={{ textDecoration: 'none' }}>
                   {icons && <HomeOutlined style={iconSX} />}
@@ -159,13 +170,7 @@ const Breadcrumbs = ({
       </Typography>
     );
     breadcrumbContent = (
-      <MainCard
-        border={card}
-        sx={card === false ? { mb: 3, bgcolor: 'transparent', ...sx } : { mb: 3, ...sx }}
-        {...others}
-        content={card}
-        shadow="none"
-      >
+      <MainCard border={card} sx={cardSx} {...others} content={card} shadow="none">
         <Grid
           container
           direction={rightAlign ? 'row' : 'column'}
@@ -221,7 +226,14 @@ const Breadcrumbs = ({
       breadcrumbContent = (
         <MainCard
           border={card}
-          sx={card === false ? { mb: 3, bgcolor: 'transparent', ...sx } : { mb: 3, ...sx }}
+          sx={{
+            mb: 3,
+            bgcolor: card === false ? 'transparent' : 'inherit',
+            ...sx,
+            [theme.breakpoints.down('sm')]: {
+              mb: 1
+            }
+          }}
           {...others}
           content={card}
           shadow="none"

package/src/components/ra-fields/ReferenceManyField.jsx

@@ -15,18 +15,22 @@ const StyledRoot = styled('div', {
     borderTop: border ? `1px solid ${theme.palette.divider}` : 'none'
   },
   '& .MuiToolbar-root': {
-    marginTop: `-${theme.spacing(2)}`,
-    marginBottom: theme.spacing(margin ? 0 : 1),
-    marginLeft: theme.spacing(margin ? 1 : 2.5),
-    marginRight: theme.spacing(margin ? 1 : 2.5),
-    width: margin ? 'auto' : `calc(100% - ${theme.spacing(5)})`,
+    [theme.breakpoints.up('sm')]: {
+      marginTop: `-${theme.spacing(2)}`,
+      marginBottom: theme.spacing(margin ? 0 : 1),
+      marginLeft: theme.spacing(margin ? 1 : 2.5),
+      marginRight: theme.spacing(margin ? 1 : 2.5),
+      width: margin ? 'auto' : `calc(100% - ${theme.spacing(5)})`
+    },
     [theme.breakpoints.down('md')]: {
       marginTop: 0
     }
   },
   '& .RaDatagrid-root': {
     overflowX: 'auto',
-    width: 'calc(100vw - 34px)'
+    [theme.breakpoints.down('sm')]: {
+      width: 'calc(100vw - 34px)'
+    }
   },
   '& .RaDatagrid-table': {
     borderBottom: `1px solid ${theme.palette.divider}`

package/src/components/ra-forms/LongForm/LongFormView.tsx

@@ -16,16 +16,25 @@ const StyledGrid = styled(Grid, {
   slot: 'Root'
 })(({ theme }) => ({
   '& .MuiToolbar-root': {
+    position: 'initial',
     marginTop: theme.spacing(2),
-    marginLeft: `-${theme.spacing(2)}`,
-    marginRight: `-${theme.spacing(2.5)}`,
+    marginLeft: `-${theme.spacing(3)}`,
+    marginRight: `-${theme.spacing(3)}`,
     marginBottom: `-${theme.spacing(2)}`,
-    borderTop: `1px solid ${theme.palette.divider}`
+    borderTop: `1px solid ${theme.palette.divider}`,
+    [theme.breakpoints.down('sm')]: {
+      position: 'initial !important',
+      width: 'auto !important'
+    }
   },
   '& form > .MuiToolbar-root': {
     // È molto importante: questa regola serve per poter inserire form, all'interno di altri form, evitando
     // che la toolbar del form interno recepisca gli stili della regola precedente (che genera un padding strano).
-    margin: 0
+    margin: 0,
+    marginRight: `-${theme.spacing(0.5)}`,
+    [theme.breakpoints.down('sm')]: {
+      marginRight: theme.spacing(0.5)
+    }
   }
 }));
 

package/src/components/ra-forms/Toolbar.jsx

@@ -1,5 +1,4 @@
 import { Toolbar as RaToolbar } from 'react-admin';
-import React from 'react';
 import { styled } from '@mui/system';
 
 const ApplicaStyledToolbar = styled(RaToolbar, {