From 582027f22aa64b1a882d92535714604b4134a4be Mon Sep 17 00:00:00 2001
From: Nathan Vasse <nathan.vasse@gmail.com>
Date: Tue, 14 May 2024 16:31:42 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(react)=20add=20a=20scroller?=
 =?UTF-8?q?=20div=20inside=20modal?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Having the position fixed and at the same time overflow auto on the same
element was causing absolute children to be cropped. We need to set those
two attribute on two different parent for these children to not be cropped.
Yes this is weird, this is CSS.
---
 .changeset/early-dryers-serve.md              |  5 +++
 .../react/src/components/Modal/index.scss     |  9 +++--
 packages/react/src/components/Modal/index.tsx | 38 ++++++++++---------
 3 files changed, 31 insertions(+), 21 deletions(-)
 create mode 100644 .changeset/early-dryers-serve.md

diff --git a/.changeset/early-dryers-serve.md b/.changeset/early-dryers-serve.md
new file mode 100644
index 0000000..b0a3fd1
--- /dev/null
+++ b/.changeset/early-dryers-serve.md
@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": patch
+---
+
+♻️(react) add a scroller div inside modal
diff --git a/packages/react/src/components/Modal/index.scss b/packages/react/src/components/Modal/index.scss
index 95c7dd3..a638700 100644
--- a/packages/react/src/components/Modal/index.scss
+++ b/packages/react/src/components/Modal/index.scss
@@ -1,7 +1,6 @@
 @use "../../utils/responsive" as *;
 
 .c__modal {
-  padding: 1.5rem;
   background-color: var(--c--components--modal--background-color);
   border-radius: var(--c--components--modal--border-radius);
   border-color: var(--c--components--modal--border-color);
@@ -13,8 +12,12 @@
   top: 50%;
   transform: translate(-50%, -50%);
   max-width: calc(100% - 2em - 6px);
-  max-height: calc(100% - 2em - 6px);
-  overflow: auto;
+
+  &__scroller {
+    padding: 1.5rem;
+    max-height: calc(100% - 2em - 6px);
+    overflow: auto;
+  }
 
   &:focus-visible {
     outline: none;
diff --git a/packages/react/src/components/Modal/index.tsx b/packages/react/src/components/Modal/index.tsx
index ab4650a..516c691 100644
--- a/packages/react/src/components/Modal/index.tsx
+++ b/packages/react/src/components/Modal/index.tsx
@@ -94,26 +94,28 @@ export const ModalInner = ({ closeOnEsc = true, ...props }: ModalProps) => {
       shouldCloseOnEsc={closeOnEsc}
       bodyOpenClassName={classNames("c__modals--opened", NOSCROLL_CLASS)}
     >
-      {!props.hideCloseButton && !props.preventClose && (
-        <div className="c__modal__close">
-          <Button
-            icon={<span className="material-icons">close</span>}
-            color="tertiary-text"
-            size="small"
-            onClick={() => props.onClose()}
-          />
-        </div>
-      )}
-      {props.titleIcon && (
-        <div className="c__modal__title-icon">{props.titleIcon}</div>
-      )}
-      {props.title && <div className="c__modal__title">{props.title}</div>}
+      <div className="c__modal__scroller">
+        {!props.hideCloseButton && !props.preventClose && (
+          <div className="c__modal__close">
+            <Button
+              icon={<span className="material-icons">close</span>}
+              color="tertiary-text"
+              size="small"
+              onClick={props.onClose}
+            />
+          </div>
+        )}
+        {props.titleIcon && (
+          <div className="c__modal__title-icon">{props.titleIcon}</div>
+        )}
+        {props.title && <div className="c__modal__title">{props.title}</div>}
 
-      {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}
-      <div className="c__modal__content" tabIndex={0}>
-        {props.children}
+        {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}
+        <div className="c__modal__content" tabIndex={0}>
+          {props.children}
+        </div>
+        <ModalFooter {...props} />
       </div>
-      <ModalFooter {...props} />
     </ReactModal>
   );
 };