From 8b8d883b0d2c8cd09e388c4d62f218344bcf4b57 Mon Sep 17 00:00:00 2001
From: "Chuma Mcphoy (We Ahead)" <chuma.mcphoy@scandichotels.com>
Date: Thu, 6 Mar 2025 14:23:05 +0000
Subject: [PATCH] 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
---
 .../Rewards/Redeem/redeem.module.css             | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/redeem.module.css b/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/redeem.module.css
index 57f1613f9..7b9567e4a 100644
--- a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/redeem.module.css
+++ b/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;
-  flex-direction: column;
-  align-items: center;
+  display: grid;
+  grid-template-columns: 1fr;
+  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 {