Merged in fix/LOY-146-make-modal-content-scrollable (pull request #1488)

fix(LOY-146): Make Tier redeem modal content scrollable

* fix(LOY-146): improve modal layout and scrolling in rewards tier redeem component


Approved-by: Christian Andolf

apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/redeem.module.css

@@ -39,10 +39,13 @@
   border-radius: var(--Corner-radius-Medium);
   box-shadow: var(--modal-box-shadow);
   width: 100%;
+  max-height: 90vh;
   position: absolute;
   left: 0;
   bottom: 0;
   z-index: 101;
+  display: flex;
+  flex-direction: column;
 }
 
 @media screen and (min-width: 768px) {
@@ -50,6 +53,7 @@
     left: auto;
     bottom: auto;
     width: 400px;
+    max-height: 80vh;
   }
 }
 
@@ -57,6 +61,8 @@
   display: flex;
   flex-direction: column;
   padding-bottom: var(--Spacing-x3);
+  overflow: hidden;
+  height: 100%;
 }
 
 .modalHeader {
@@ -68,14 +74,17 @@
   position: relative;
   justify-content: center;
   padding: var(--Spacing-x3) var(--Spacing-x2) 0;
+  flex-shrink: 0;
 }
 
 .modalContent {
-  display: flex;
+  display: grid;
-  flex-direction: column;
+  grid-template-columns: 1fr;
-  align-items: center;
+  place-items: center;
   gap: var(--Spacing-x2);
   padding: 0 var(--Spacing-x3) var(--Spacing-x3);
+  overflow-y: auto;
+  flex-grow: 1;
 }
 
 .modalFooter {
@@ -83,6 +92,7 @@
   flex-direction: column;
   padding: 0 var(--Spacing-x3) var(--Spacing-x1);
   gap: var(--Spacing-x-one-and-half);
+  flex-shrink: 0;
 }
 
 .modalFooter > button {