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 {