Merge pull request #228 from farrah-deriv/FEQ-1301/bug-fixes

farrah/FEQ-1301/fix: issues on My Profile page
deriv-com · Aug 1, 2024 · e960714 · e960714
2 parents f8c0f61 + 1c26468
commit e960714
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 13 deletions.
diff --git a/src/components/PaymentMethodForm/PaymentMethodForm.scss b/src/components/PaymentMethodForm/PaymentMethodForm.scss
@@ -6,6 +6,7 @@
 
     @include mobile-or-tablet-screen {
         width: 100%;
+        height: 100%;
         min-width: 36rem;
         position: absolute;
         top: 0;
@@ -47,28 +48,35 @@
             }
         }
     }
+
     .derivs-button__variant--ghost:hover:not(:disabled) {
         background: transparent;
         text-decoration: underline;
         text-decoration-color: #ec3f3f;
     }
+
     .deriv-input--field:not(:focus) {
         border: 1px solid #d6dadb;
     }
+
     .deriv-input__field:not(:placeholder-shown) ~ label {
         color: #333333;
     }
+
     .deriv-input__container {
         width: 100%;
     }
+
     .deriv-input {
         padding: 0.5 1.2rem;
     }
+
     .deriv-input,
     .deriv-input--field {
         width: 100%;
         font-size: 1.4rem;
     }
+
     .deriv-input__right-content {
         display: flex;
         align-items: center;
@@ -88,12 +96,13 @@
 
         @include mobile-or-tablet-screen {
             overflow: auto;
-            height: calc(100vh - 17rem);
-            padding-bottom: 8rem;
+            height: calc(100% - 11rem);
         }
+    }
 
-        @include mobile {
-            height: calc(100vh - 16rem);
+    &__fields {
+        @include mobile-or-tablet-screen {
+            flex: 1;
         }
     }
 
@@ -113,13 +122,15 @@
         cursor: pointer;
         color: #ffffff;
         font-size: large;
+
         rect {
             fill: #999;
         }
     }
 
     &__field {
         color: #333333;
+
         &-wrapper {
             width: 100%;
             padding: 1rem 0;
@@ -132,9 +143,11 @@
                 & .deriv-dropdown__items {
                     box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.24);
                 }
+
                 & .deriv-input {
                     height: 4rem;
                     align-items: center;
+
                     &__helper-message {
                         display: none;
                     }
@@ -144,9 +157,11 @@
                     max-height: 20rem;
                 }
             }
+
             & .deriv-input__right-content {
                 display: flex;
                 align-items: center;
+
                 & .deriv-dropdown__button {
                     &--active {
                         transform: none;
@@ -155,6 +170,7 @@
             }
         }
     }
+
     &__text {
         display: inline-block;
         line-height: 1.5;

diff --git a/src/components/PaymentMethodsFormFooter/PaymentMethodsFormFooter.scss b/src/components/PaymentMethodsFormFooter/PaymentMethodsFormFooter.scss
@@ -10,7 +10,5 @@
         width: 100%;
         padding: 1.6rem 2.4rem;
         border-top: 2px solid #f2f3f4;
-        position: absolute;
-        bottom: 0;
     }
 }
diff --git a/src/pages/my-profile/screens/MyProfile/MyProfile.scss b/src/pages/my-profile/screens/MyProfile/MyProfile.scss
@@ -3,13 +3,11 @@
     flex-direction: column;
     padding-top: 2.4rem;
     overflow-y: auto;
-    max-height: calc(100vh - 19rem);
-    min-height: calc(100vh - 19rem);
+    height: calc(100% - 12rem);
 
     @include mobile-or-tablet-screen {
         padding: 0;
-        max-height: calc(100vh - 11rem);
-        min-height: calc(100vh - 11rem);
+        height: calc(100% - 11rem);
     }
 
     &__tabs {

diff --git a/src/pages/my-profile/screens/MyProfileAdDetails/MyProfileAdDetails.scss b/src/pages/my-profile/screens/MyProfileAdDetails/MyProfileAdDetails.scss
@@ -16,7 +16,7 @@
     &__mobile-wrapper {
         position: absolute;
         top: 0;
-        height: calc(100vh - 7.5rem);
+        height: calc(100% - 7.5rem);
     }
 
     & .deriv-textarea {

diff --git a/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsEmpty/PaymentMethodsEmpty.scss b/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsEmpty/PaymentMethodsEmpty.scss
@@ -5,7 +5,7 @@
     width: 100%;
 
     @include mobile-or-tablet-screen {
-        margin-top: 7rem;
+        margin: 7rem 0 2rem;
         justify-content: center;
     }
 

diff --git a/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/PaymentMethodsList.scss b/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/PaymentMethodsList.scss
@@ -5,7 +5,7 @@
 
         & .mobile-wrapper {
             &__body {
-                height: calc(100vh - 22rem);
+                height: 100%;
                 overflow-y: scroll;
             }