♻️(react) add a scroller div inside modal

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.

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;

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>
   );
 };