From 26137584a46bca763f6334033b6241809f53e6fa Mon Sep 17 00:00:00 2001
From: sirineJ <112706079+sirineJ@users.noreply.github.com>
Date: Tue, 17 Dec 2024 17:03:09 +0100
Subject: [PATCH] refactor styles

---
 .changeset/gold-lemons-report.md              |   2 +-
 .../components/Modal/Modal.module.css         | 100 +++++++++---------
 .../circuit-ui/components/Modal/Modal.tsx     |   2 +-
 3 files changed, 50 insertions(+), 54 deletions(-)

diff --git a/.changeset/gold-lemons-report.md b/.changeset/gold-lemons-report.md
index 45620b9827..1f6368acaf 100644
--- a/.changeset/gold-lemons-report.md
+++ b/.changeset/gold-lemons-report.md
@@ -1,5 +1,5 @@
 ---
-"@sumup-oss/design-tokens": patch
+"@sumup-oss/design-tokens": minor
 ---
 
 Added "::backdrop" to the list of selectors to apply theme custom properties to. See https://developer.chrome.com/blog/css-backdrop-inheritance.
diff --git a/packages/circuit-ui/components/Modal/Modal.module.css b/packages/circuit-ui/components/Modal/Modal.module.css
index 383becdc1e..3c80765f61 100644
--- a/packages/circuit-ui/components/Modal/Modal.module.css
+++ b/packages/circuit-ui/components/Modal/Modal.module.css
@@ -1,9 +1,5 @@
-.dialog {
+.base {
   position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
   padding: 0;
   margin: auto;
   overflow-y: auto;
@@ -11,18 +7,21 @@
   visibility: hidden;
   background-color: var(--cui-bg-elevated);
   border: none;
-  border-radius: var(--cui-border-radius-mega);
   outline: none;
   animation: fade-out 0.3s forwards;
 }
 
-.dialog.show {
+.base.show {
   pointer-events: auto;
   animation: fade-in 0.3s forwards;
 }
 
-.dialog::after {
-  position: absolute;
+.content {
+  position: relative;
+}
+
+.base::after {
+  position: sticky;
   right: 0;
   bottom: 0;
   left: 0;
@@ -36,16 +35,30 @@
 }
 
 @media (min-width: 480px) {
-  .dialog::after {
+  .base {
+    width: min-content;
+    min-width: 480px;
+    max-width: 90vw;
+    max-height: 90vh;
+    border-radius: var(--cui-border-radius-mega);
+  }
+
+  .base::after {
     height: var(--cui-spacings-giga);
-    border-bottom-right-radius: var(--cui-border-radius-mega);
-    border-bottom-left-radius: var(--cui-border-radius-mega);
+  }
+
+  .base .content {
+    padding: var(--cui-spacings-giga);
+    padding-bottom: calc(
+      env(safe-area-inset-bottom) + var(--cui-spacings-giga)
+    );
   }
 }
 
 @media (max-width: 479px) {
-  .dialog {
+  .base {
     top: unset;
+    right: 0;
     bottom: 0;
     left: 0;
     width: 100%;
@@ -55,24 +68,39 @@
     animation: slide-out 0.3s forwards;
   }
 
-  .dialog.show {
+  .base.show {
     animation: slide-in 0.3s forwards;
   }
+
+  .immersive {
+    height: 100%;
+    max-height: unset;
+    border: none;
+    border-radius: unset;
+  }
+
+  .base .content {
+    padding: var(--cui-spacings-mega);
+    padding-bottom: calc(
+      env(safe-area-inset-bottom) + var(--cui-spacings-mega)
+    );
+    -webkit-overflow-scrolling: touch;
+  }
 }
 
 /* Native Backdrop */
-.dialog::backdrop {
+.base::backdrop {
   background-color: var(--cui-bg-overlay);
   animation: fade-out 0.3s forwards;
 }
 
-.dialog.show::backdrop {
+.base.show::backdrop {
   pointer-events: auto;
   animation: fade-in 0.3s forwards;
 }
 
 /* Polyfill Backdrop */
-.dialog + .backdrop {
+.base + .backdrop {
   position: fixed;
   top: 0;
   right: 0;
@@ -86,47 +114,15 @@
   animation: fade-in 0.3s forwards;
 }
 
-.dialog .close {
+/* Close button */
+.base .close {
   position: absolute;
   top: var(--cui-spacings-byte);
   right: var(--cui-spacings-byte);
   z-index: var(--cui-z-index-absolute);
 }
 
-@media (max-width: 479px) {
-  .immersive {
-    height: 100%;
-    max-height: unset;
-    border: none;
-    border-radius: unset;
-  }
-}
-
-@media (max-width: 479px) {
-  .dialog .content {
-    padding: var(--cui-spacings-mega);
-    padding-bottom: calc(
-      env(safe-area-inset-bottom) + var(--cui-spacings-mega)
-    );
-    -webkit-overflow-scrolling: touch;
-  }
-}
-
-@media (min-width: 480px) {
-  .dialog {
-    width: min-content;
-    min-width: 480px;
-    max-width: 90vw;
-    max-height: 90vh;
-  }
-
-  .dialog .content {
-    padding: var(--cui-spacings-giga);
-    padding-bottom: calc(
-      env(safe-area-inset-bottom) + var(--cui-spacings-giga)
-    );
-  }
-}
+/* Animations */
 
 @keyframes fade-in {
   from {
diff --git a/packages/circuit-ui/components/Modal/Modal.tsx b/packages/circuit-ui/components/Modal/Modal.tsx
index 936bb1539f..56911da10f 100644
--- a/packages/circuit-ui/components/Modal/Modal.tsx
+++ b/packages/circuit-ui/components/Modal/Modal.tsx
@@ -300,7 +300,7 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>((props, ref) => {
         onClick={onDialogClick}
         ref={applyMultipleRefs(ref, dialogRef)}
         className={clsx(
-          classes.dialog,
+          classes.base,
           variant === 'immersive' && classes.immersive,
           className,
         )}