From 3676af87d6c0f4076b9f2217356d230e146cc7ec Mon Sep 17 00:00:00 2001
From: Aum Bhatt <125039206+aum-deriv@users.noreply.github.com>
Date: Tue, 24 Oct 2023 12:44:26 +0400
Subject: [PATCH] aum/feat: fix-iframe-UI-issues (#10888)

* fix: fixed the wallets-app (AppContent) height for desktop and responsive

* fix: fix issues related to iframe

* chore: empty commit

* aum/chore: separate cashier modules into cashier folder (#10708)

* refactor: created cashier folder and separated deposit-fiat-module

* refactor: added the deposit-crypto-module

* chore: moved cashier folder inside src

* refactor: created deposit-crypto folder

* refactor: added transfer module

* refactor: added transactions module

* refactor: moved cashier module inside features/cashier

* refactor: replaced components from screens with modules

* refactor: moved withdrawal-email-verification to modules

* chore: moved sub-components for deposit-crypto in components folder

* chore: moved sub-components of transfer to components folder

* chore: export transfer components as modules

* chore: removed the screens folder

* feat: transactions-module

* feat: transfer-module

* feat: withdrawal-module

* chore: renamed TransactionsCryptoRow to TransactionsPendingRow

* chore: renamed TransactionsCrypto to TransactionsPending

* chore: updated Transactions-module with master

* Merge branch 'master' of github.com:binary-com/deriv-app into cashier-folder-wallets

* chore: fixed merge conflicts

* chore: rename Withdrawal to WithdrawalVerification

* chore: trial to remove translations for ar.json

* chore: removed more unwanted commits from master

* chore: removing changes from master

* chore: pushing

* feat: ResetBalanceModule

* chore: updated transactions

* chore: removed screens

* chore: empty commit

* fix: fixed the iframe-width for widescreen displays

* chore: removed redundant style

* chore: empty commit

* chore: removed unwanted files from PR

* chore: removed redundant styling for height from AppContent

* chore: changed unit to rem
---
 packages/wallets/src/AppContent.scss                       | 2 +-
 packages/wallets/src/features/cashier/WalletCashier.scss   | 6 +++---
 .../features/cashier/modules/DepositFiat/DepositFiat.scss  | 7 ++++++-
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/packages/wallets/src/AppContent.scss b/packages/wallets/src/AppContent.scss
index 92b580734fc7..9bfde02a3bdb 100644
--- a/packages/wallets/src/AppContent.scss
+++ b/packages/wallets/src/AppContent.scss
@@ -4,9 +4,9 @@
     align-items: center;
     gap: 24px;
     width: 100%;
-    min-height: calc(100vh - 8.4rem); // 100vh - (4.8rem header + 3.6rem footer)
     align-self: stretch;
     background: var(--system-light-7-secondary-background, #f2f3f4);
+    height: calc(100vh - 8.4rem); // 100vh - (4.8rem header + 3.6rem footer)
 
     @include mobile {
         overflow-y: auto;
diff --git a/packages/wallets/src/features/cashier/WalletCashier.scss b/packages/wallets/src/features/cashier/WalletCashier.scss
index 1b3abb2cafd8..dd2bab0288e2 100644
--- a/packages/wallets/src/features/cashier/WalletCashier.scss
+++ b/packages/wallets/src/features/cashier/WalletCashier.scss
@@ -1,12 +1,12 @@
 .wallets-cashier-content {
-    padding: 24px;
+    padding: 2.4rem 2.4rem 0px;
     display: flex;
-    gap: 24px;
+    gap: 2.4rem;
     justify-content: center;
     flex: 1;
     background-color: #ffffff;
 
     @include mobile {
-        padding: 16px;
+        padding: 1.6rem;
     }
 }
diff --git a/packages/wallets/src/features/cashier/modules/DepositFiat/DepositFiat.scss b/packages/wallets/src/features/cashier/modules/DepositFiat/DepositFiat.scss
index 4fdabb78e5ca..15bc5622f1e5 100644
--- a/packages/wallets/src/features/cashier/modules/DepositFiat/DepositFiat.scss
+++ b/packages/wallets/src/features/cashier/modules/DepositFiat/DepositFiat.scss
@@ -1,7 +1,12 @@
 .wallets-deposit-fiat {
     &__iframe {
         width: 50%;
-        height: 65vh;
+        max-width: 58.8rem;
+        height: 100%;
         border: none;
+
+        @include mobile {
+            width: 100%;
+        }
     }
 }