From de4559deb744abe47c1e8393cccbce77546911f6 Mon Sep 17 00:00:00 2001
From: aizad-deriv <aizad@deriv.com>
Date: Fri, 10 May 2024 12:05:14 +0800
Subject: [PATCH 1/2] chore: Add scroll to small screens for modal

---
 .../Base/ModalStepWrapper/ModalStepWrapper.scss        | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/wallets/src/components/Base/ModalStepWrapper/ModalStepWrapper.scss b/packages/wallets/src/components/Base/ModalStepWrapper/ModalStepWrapper.scss
index 0f6fe1474809..4a24236e9288 100644
--- a/packages/wallets/src/components/Base/ModalStepWrapper/ModalStepWrapper.scss
+++ b/packages/wallets/src/components/Base/ModalStepWrapper/ModalStepWrapper.scss
@@ -2,6 +2,8 @@
     background: var(--general-main-2, #ffffff);
     border-radius: 0.8rem;
     animation: fadein 0.6s ease backwards;
+    max-height: calc(var(--wallets-vh, 1vh) * 100 - 10rem);
+    overflow: auto;
 
     @include mobile {
         animation: popup 0.2s;
@@ -36,11 +38,15 @@
     }
 
     &__header {
+        position: sticky;
+        inset: 0;
         padding: 1.6rem 2.4rem;
         border-bottom: 0.2rem solid #f2f3f4;
         display: flex;
         justify-content: space-between;
         align-items: center;
+        background: var(--general-main-2, #ffffff);
+        z-index: 1;
 
         &-close-icon {
             cursor: pointer;
@@ -49,7 +55,7 @@
         @include mobile {
             display: grid;
             grid-template-columns: auto 2rem;
-            background-color: #ffffff;
+            background: var(--general-main-2, #ffffff);
             position: relative;
             z-index: 99;
             width: 100%;
@@ -74,7 +80,7 @@
         align-items: center;
 
         @include mobile {
-            background-color: #ffffff;
+            background: var(--general-main-2, #ffffff);
             position: relative;
             z-index: 99;
             height: auto;

From 9e3aa43a69e05ff67acbfe0c465c5e649571e115 Mon Sep 17 00:00:00 2001
From: aizad-deriv <aizad@deriv.com>
Date: Fri, 10 May 2024 12:28:16 +0800
Subject: [PATCH 2/2] chore: add styles for desktop screens

---
 .../components/Base/ModalStepWrapper/ModalStepWrapper.scss | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/wallets/src/components/Base/ModalStepWrapper/ModalStepWrapper.scss b/packages/wallets/src/components/Base/ModalStepWrapper/ModalStepWrapper.scss
index 4a24236e9288..9f8febf57d2c 100644
--- a/packages/wallets/src/components/Base/ModalStepWrapper/ModalStepWrapper.scss
+++ b/packages/wallets/src/components/Base/ModalStepWrapper/ModalStepWrapper.scss
@@ -2,8 +2,11 @@
     background: var(--general-main-2, #ffffff);
     border-radius: 0.8rem;
     animation: fadein 0.6s ease backwards;
-    max-height: calc(var(--wallets-vh, 1vh) * 100 - 10rem);
-    overflow: auto;
+
+    @include desktop {
+        max-height: calc(var(--wallets-vh, 1vh) * 100 - 10rem);
+        overflow: auto;
+    }
 
     @include mobile {
         animation: popup 0.2s;