Suisin/Fixed Overflow Contract in Mobile View (#7197)

* Fixed Overflow Contract in Mobile View

* Rerun

* Updated Scss

* Update font-size

* Updated media screen for css

* Update css after contract won

* Order .attr to the correct placement

* Remove space in litera string

Co-authored-by: Matin shafiei <matin@deriv.com>

Author: suisin-deriv

src/javascript/app/pages/trade/purchase.js

@@ -173,14 +173,14 @@ const Purchase = (() => {
 
             const potential_profit_value = payout_value ? formatMoney(currency, payout_value - cost_value) : undefined;
 
-            CommonFunctions.elementInnerHtml(cost,   `${localize('Total Cost')} <p>${formatMoney(currency, cost_value)}</p>`);
+            CommonFunctions.elementInnerHtml(cost,   `${localize('Total Cost')} <p id="contract_purchase_cost--amount">${formatMoney(currency, cost_value)}</p>`);
             if (isLookback(contract_type)) {
-                CommonFunctions.elementInnerHtml(payout, `${localize('Potential Payout')} <p>${formula}</p>`);
+                CommonFunctions.elementInnerHtml(payout, `${localize('Potential Payout')} <p id="contract_purchase_payout--amount">${formula}</p>`);
                 profit.setVisibility(0);
             } else {
                 profit.setVisibility(1);
-                CommonFunctions.elementInnerHtml(payout, `${localize('Potential Payout')} <p>${formatMoney(currency, payout_value)}</p>`);
-                CommonFunctions.elementInnerHtml(profit, `${localize('Potential Profit')} <p>${potential_profit_value}</p>`);
+                CommonFunctions.elementInnerHtml(payout, `${localize('Potential Payout')} <p id="contract_purchase_payout--amount">${formatMoney(currency, payout_value)}</p>`);
+                CommonFunctions.elementInnerHtml(profit, `${localize('Potential Profit')} <p id="contract_purchase_profit--amount">${potential_profit_value}</p>`);
             }
 
             updateValues.updateContractBalance(receipt.balance_after);

src/javascript/app/pages/trade/update_values.js

@@ -9,12 +9,12 @@ const updatePurchaseStatus = (final_price, pnl, profit, localized_contract_statu
     const $profit  = $('#contract_purchase_profit');
     const currency = Client.get('currency');
 
-    $payout.html($('<div/>', { text: localize('Buy price') }).append($('<p/>', { html: formatMoney(currency, Math.abs(pnl)) })));
-    $cost.html($('<div/>', { text: localize('Final price') }).append($('<p/>', { html: formatMoney(currency, final_price) })));
+    $payout.html($('<div/>', { text: localize('Buy price') }).append($('<p/>', { html: formatMoney(currency, Math.abs(pnl)) }).attr('id','contract_purchase_payout--amount')));
+    $cost.html($('<div/>', { text: localize('Final price') }).append($('<p/>', { html: formatMoney(currency, final_price) }).attr('id','contract_purchase_cost--amount')));
     if (!final_price) {
-        $profit.html($('<div/>', { text: localize('Loss') }).append($('<p/>', { html: formatMoney(currency, pnl) })));
+        $profit.html($('<div/>', { text: localize('Loss') }).append($('<p/>', { html: formatMoney(currency, pnl) }).attr('id','contract_purchase_loss--amount')));
     } else {
-        $profit.html($('<div/>', { text: localize('Profit') }).append($('<p/>', { html: formatMoney(currency, profit) })));
+        $profit.html($('<div/>', { text: localize('Profit') }).append($('<p/>', { html: formatMoney(currency, profit) }).attr('id','contract_purchase_profit--amount')));
         updateContractBalance(Client.get('balance'));
     }
 };

src/sass/app/trade.scss

@@ -537,6 +537,13 @@
                 background-color: rgba(204, 0, 0, 0.1);
             }
         }
+        #contract_purchase_cost, #contract_purchase_payout, #contract_purchase_profit, #contract_purchase_loss {
+            @media screen and (max-width: 375px) {
+                &--amount {
+                    font-size: 4vw;
+                }
+            }
+        }
         #contract_purchase_payout {
             border-right: 1px solid $COLOR_GRAY;
         }