fix: Action buttons at the bottom of Dialog/IllustrationDialog on mobile

fix #1868
cozy · May 20, 2022 · b924001 · b924001
1 parent 60da758
commit b924001
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 4 deletions.
diff --git a/react/CozyDialogs/ConfirmDialog.jsx b/react/CozyDialogs/ConfirmDialog.jsx
@@ -48,7 +48,13 @@ const ConfirmDialog = props => {
               <DialogTitle {...dialogTitleProps}>{title}</DialogTitle>
             </div>
           )}
-          {content}
+          <div
+            className={cx('dialogContentWrapper', {
+              withActions: Boolean(actions)
+            })}
+          >
+            {content}
+          </div>
           {actions && (
             <DialogActions
               {...dialogActionsProps}

diff --git a/react/CozyDialogs/Dialog.jsx b/react/CozyDialogs/Dialog.jsx
@@ -50,7 +50,13 @@ const Dialog = props => {
       )}
       <DialogContent {...dialogContentProps}>
         <div className="dialogContentInner withFluidActions">
-          {content}
+          <div
+            className={cx('dialogContentWrapper', {
+              withActions: Boolean(actions)
+            })}
+          >
+            {content}
+          </div>
           {actions && (
             <DialogActions
               {...dialogActionsProps}

diff --git a/react/CozyDialogs/IllustrationDialog.jsx b/react/CozyDialogs/IllustrationDialog.jsx
@@ -48,7 +48,13 @@ const IllustrationDialog = props => {
               <div className="u-flex u-flex-justify-center">{title}</div>
             </DialogTitle>
           )}
-          {content}
+          <div
+            className={cx('dialogContentWrapper', {
+              withActions: Boolean(actions)
+            })}
+          >
+            {content}
+          </div>
           {actions && (
             <DialogActions
               {...dialogActionsProps}

diff --git a/react/MuiCozyTheme/makeOverrides.js b/react/MuiCozyTheme/makeOverrides.js
@@ -577,7 +577,19 @@ const makeOverrides = theme => ({
         marginBottom: '24px',
         '&.withFluidActions': {
           [theme.breakpoints.down('sm')]: {
-            marginBottom: '16px'
+            marginBottom: 0,
+            display: 'flex',
+            flexDirection: 'column',
+            height: '100%',
+            '& .dialogContentWrapper': {
+              flexGrow: 1,
+              '&:not(.withActions)': {
+                paddingBottom: '16px'
+              }
+            },
+            '& .cozyDialogActions': {
+              paddingBottom: '16px'
+            }
           }
         },
         '& .dialogTitleFluidContainer': {