From 6f078e0c4b9af0deaed15ea18653bd58477a9627 Mon Sep 17 00:00:00 2001
From: Abhinav-grd <abhinavk.grd@gmail.com>
Date: Sat, 8 May 2021 11:38:41 +0530
Subject: [PATCH] improved Message box button reponsive styling

---
 src/components/MessageDialog.tsx | 74 +++++++++++++++++++-------------
 1 file changed, 45 insertions(+), 29 deletions(-)

diff --git a/src/components/MessageDialog.tsx b/src/components/MessageDialog.tsx
index 7b50d8a83..16803c391 100644
--- a/src/components/MessageDialog.tsx
+++ b/src/components/MessageDialog.tsx
@@ -52,35 +52,51 @@ export default function MessageDialog({
                 </Modal.Body>
             )}
             <Modal.Footer style={{ borderTop: 'none' }}>
-                {attributes.close && (
-                    <Button
-                        variant={`outline-${
-                            attributes.close?.variant ?? 'secondary'
-                        }`}
-                        onClick={props.onHide}
-                        style={{
-                            padding: '6px 3em',
-                            marginRight: '20px',
-                        }}
-                    >
-                        {attributes.close?.text ?? constants.OK}
-                    </Button>
-                )}
-                {attributes.proceed && (
-                    <Button
-                        variant={`outline-${
-                            attributes.proceed?.variant ?? 'primary'
-                        }`}
-                        onClick={() => {
-                            attributes.proceed.action();
-                            props.onHide();
-                        }}
-                        style={{ padding: '6px 3em', marginRight: '20px' }}
-                        disabled={attributes.proceed.disabled}
-                    >
-                        {attributes.proceed.text}
-                    </Button>
-                )}
+                <div
+                    style={{
+                        display: 'flex',
+                        flexWrap: 'wrap',
+                    }}
+                >
+                    {attributes.close && (
+                        <Button
+                            variant={`outline-${
+                                attributes.close?.variant ?? 'secondary'
+                            }`}
+                            onClick={props.onHide}
+                            style={{
+                                padding: '6px 3em',
+                                margin: '0 20px',
+                                marginBottom: '20px',
+                                flex: 1,
+                                whiteSpace: 'nowrap',
+                            }}
+                        >
+                            {attributes.close?.text ?? constants.OK}
+                        </Button>
+                    )}
+                    {attributes.proceed && (
+                        <Button
+                            variant={`outline-${
+                                attributes.proceed?.variant ?? 'primary'
+                            }`}
+                            onClick={() => {
+                                attributes.proceed.action();
+                                props.onHide();
+                            }}
+                            style={{
+                                padding: '6px 3em',
+                                margin: '0 20px',
+                                marginBottom: '20px',
+                                flex: 1,
+                                whiteSpace: 'nowrap',
+                            }}
+                            disabled={attributes.proceed.disabled}
+                        >
+                            {attributes.proceed.text}
+                        </Button>
+                    )}
+                </div>
             </Modal.Footer>
         </Modal>
     );