[WALL] Aizad/WALL-4048/Adding Scroll To ModalStepWrapper (deriv-com#1…

…5085)

* chore: Add scroll to small screens for modal

* chore: add styles for desktop screens

packages/wallets/src/components/Base/ModalStepWrapper/ModalStepWrapper.scss

@@ -3,6 +3,11 @@
     border-radius: 0.8rem;
     animation: fadein 0.6s ease backwards;
 
+    @include desktop {
+        max-height: calc(var(--wallets-vh, 1vh) * 100 - 10rem);
+        overflow: auto;
+    }
+
     @include mobile {
         animation: popup 0.2s;
         height: calc(var(--wallets-vh, 1vh) * 100 - 4rem);
@@ -36,11 +41,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 +58,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 +83,7 @@
         align-items: center;
 
         @include mobile {
-            background-color: #ffffff;
+            background: var(--general-main-2, #ffffff);
             position: relative;
             z-index: 99;
             height: auto;