Prince/ Chart issues (#802)

* chore: hide annoying chart

* fix: chart loading and distortion issue

* chore: fix issues that cameback

src/javascript/app/pages/bottom/tabs.jsx

@@ -88,8 +88,8 @@ const BottomTabs = () => {
                 />}
                 {selected_tab === 1 && <Explanation />}
                 {selected_tab === 2 && has_last_digit && <LastDigit />}
-       
-                <div id='tab_graph' className={`chart-section ${is_show_graph ? '' : 'grap-hide'}`}>
+
+                <div id='tab_graph' className={`chart-section ${is_show_graph ? '' : 'graph-hide'}`}>
                     <p className='error-msg' id='chart-error' />
                     <div id='trade_live_chart'>
                         <div id='webtrader_chart' />

src/javascript/app/pages/trade/purchase/contract-details.jsx

@@ -11,6 +11,9 @@ import { Explanation } from '../../bottom/explanation';
 import { TimeTooltipWrapper, triggerClick } from '../../../common/helpers';
 
 const resetPopupData = (is_audit_reset = false) => {
+    // Trigger old close btn
+    triggerClick('.inpage_popup_container a.close');
+
     const audit_reset_object = {
         cd_show_audit : false,
         audit_data_end: [],

src/sass/_common/reskin.scss

@@ -47,8 +47,7 @@ body {
 .chart-section {
     padding-block: 32px;
 }
-
-
+
 .contained-section {
     width: 100%;
     max-width: 940px;
@@ -907,6 +906,7 @@ html.test {
 }
 
 .bottom-content-section {
+    position: relative;
     min-height: 400px;
     padding: 16px;
 
@@ -1098,7 +1098,8 @@ html.test {
 
 // Graph visibility control
 #tab_graph {
-    &.grap-hide {
+    &.graph-hide {
+        width: 100%;
         position: absolute;
         top: -9999px;
     }