From b924001767199a7d5c0a471c4a44d4b45130b2b9 Mon Sep 17 00:00:00 2001
From: JF-Cozy <julien.ficheux@cozycloud.cc>
Date: Fri, 13 May 2022 16:09:28 +0200
Subject: [PATCH] fix: Action buttons at the bottom of
 Dialog/IllustrationDialog on mobile

fix https://github.com/cozy/cozy-ui/issues/1868
---
 react/CozyDialogs/ConfirmDialog.jsx      |  8 +++++++-
 react/CozyDialogs/Dialog.jsx             |  8 +++++++-
 react/CozyDialogs/IllustrationDialog.jsx |  8 +++++++-
 react/MuiCozyTheme/makeOverrides.js      | 14 +++++++++++++-
 4 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/react/CozyDialogs/ConfirmDialog.jsx b/react/CozyDialogs/ConfirmDialog.jsx
index 18738bc6d2..e9a9005b33 100644
--- 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
index 2be26795fd..88e270a5ff 100644
--- 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
index 4913ccf0de..fac414be9f 100644
--- 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
index a483a71718..1f0a6d24f2 100644
--- 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': {