From 680365a117a5b080dffaeb9cbc5c2c2c3e6731ef Mon Sep 17 00:00:00 2001
From: Nathan Vasse <nathan.vasse@gmail.com>
Date: Wed, 28 Feb 2024 12:22:22 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(react)=20make=20Modal=20close=20bu?=
 =?UTF-8?q?tton=20sticky?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

We want to make sure this button is always visible inside scrollable
modals.

Fixes #278
---
 .changeset/early-timers-march.md               |  5 +++++
 packages/react/src/components/Modal/index.scss | 16 +++++++++++++---
 packages/react/src/components/Modal/index.tsx  |  2 +-
 3 files changed, 19 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/early-timers-march.md

diff --git a/.changeset/early-timers-march.md b/.changeset/early-timers-march.md
new file mode 100644
index 0000000..4c55708
--- /dev/null
+++ b/.changeset/early-timers-march.md
@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": minor
+---
+
+make Modal close button sticky
diff --git a/packages/react/src/components/Modal/index.scss b/packages/react/src/components/Modal/index.scss
index e1f9bd4..dd682e9 100644
--- a/packages/react/src/components/Modal/index.scss
+++ b/packages/react/src/components/Modal/index.scss
@@ -69,9 +69,19 @@
   }
 
   &__close {
-    position: absolute;
-    top: 0.75rem;
-    right: 0.75rem;
+    position: sticky;
+    top: 0;
+    display: flex;
+    justify-content: end;
+    z-index: 1;
+    height: 0;
+
+    .c__button {
+      right: -0.75rem;
+      top: -0.75rem;
+      position: relative;
+      background: var(--c--components--modal--background-color);
+    }
   }
 
   &__footer {
diff --git a/packages/react/src/components/Modal/index.tsx b/packages/react/src/components/Modal/index.tsx
index 548567a..e0d1a0f 100644
--- a/packages/react/src/components/Modal/index.tsx
+++ b/packages/react/src/components/Modal/index.tsx
@@ -132,7 +132,7 @@ export const ModalInner = (props: ModalProps) => {
                 <Button
                   icon={<span className="material-icons">close</span>}
                   color="tertiary-text"
-                  size="nano"
+                  size="small"
                   onClick={() => props.onClose()}
                 />
               </div>