From ce7a3d7c5b4b6a51cd3b3a7e53ec88d053730d22 Mon Sep 17 00:00:00 2001
From: Nathan Vasse <nathan.vasse@gmail.com>
Date: Tue, 27 Feb 2024 11:21:15 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=B1(react)=20improve=20Modal=20respons?=
 =?UTF-8?q?ive?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The footer of the Modal component was not perfect on mobile, the sided
footer must be on two lines on mobile.
---
 .../react/src/components/Modal/index.scss     | 10 +++++
 .../src/components/Modal/index.stories.tsx    | 38 +++++++++++++++----
 2 files changed, 41 insertions(+), 7 deletions(-)

diff --git a/packages/react/src/components/Modal/index.scss b/packages/react/src/components/Modal/index.scss
index 22bfbc7..e1f9bd4 100644
--- a/packages/react/src/components/Modal/index.scss
+++ b/packages/react/src/components/Modal/index.scss
@@ -84,6 +84,16 @@
     &--sided {
       justify-content: space-between;
       gap: 0;
+
+      @include media(sm) {
+        flex-direction: column;
+        gap: 1rem;
+        align-items: center;
+
+        > div {
+          width: 100%;
+        }
+      }
     }
 
     &__left, &__right {
diff --git a/packages/react/src/components/Modal/index.stories.tsx b/packages/react/src/components/Modal/index.stories.tsx
index 8d33fe5..57d0c5a 100644
--- a/packages/react/src/components/Modal/index.stories.tsx
+++ b/packages/react/src/components/Modal/index.stories.tsx
@@ -85,33 +85,57 @@ export const PreventClose: Story = {
 export const PrimaryButton: Story = {
   args: {
     size: ModalSize.MEDIUM,
-    rightActions: <Button color="primary">Primary</Button>,
+    rightActions: (
+      <Button color="primary" fullWidth={true}>
+        Primary
+      </Button>
+    ),
   },
 };
 
 export const SecondaryButton: Story = {
   args: {
     size: ModalSize.MEDIUM,
-    rightActions: <Button color="secondary">Secondary</Button>,
+    rightActions: (
+      <Button color="secondary" fullWidth={true}>
+        Secondary
+      </Button>
+    ),
   },
 };
 
 export const TwoButtons: Story = {
   args: {
     size: ModalSize.MEDIUM,
-    leftActions: <Button color="secondary">Secondary</Button>,
-    rightActions: <Button color="primary">Primary</Button>,
+    leftActions: (
+      <Button color="secondary" fullWidth={true}>
+        Secondary
+      </Button>
+    ),
+    rightActions: (
+      <Button color="primary" fullWidth={true}>
+        Primary
+      </Button>
+    ),
   },
 };
 
 export const ThreeButtons: Story = {
   args: {
     size: ModalSize.MEDIUM,
-    leftActions: <Button color="tertiary">Tertiary</Button>,
+    leftActions: (
+      <Button color="tertiary" fullWidth={true}>
+        Tertiary
+      </Button>
+    ),
     rightActions: (
       <>
-        <Button color="secondary">Secondary</Button>
-        <Button color="primary">Primary</Button>
+        <Button color="secondary" fullWidth={true}>
+          Secondary
+        </Button>
+        <Button color="primary" fullWidth={true}>
+          Primary
+        </Button>
       </>
     ),
   },