fix: chart loading and distortion issue

deriv-com · Aug 15, 2024 · 1049c58 · 1049c58
1 parent f695289
commit 1049c58
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git a/src/javascript/app/pages/bottom/tabs.jsx b/src/javascript/app/pages/bottom/tabs.jsx
@@ -88,8 +88,8 @@ const BottomTabs = () => {
                 />}
                 {selectedTab === 1 && <Explanation />}
                 {selectedTab === 2 && hasLastDigit && <LastDigit />}
-       
-                <div id='tab_graph' className={`chart-section ${isShowGraph ? '' : 'grap-hide'}`}>
+
+                <div id='tab_graph' className={`chart-section ${isShowGraph ? '' : 'graph-hide'}`}>
                     <p className='error-msg' id='chart-error' />
                     <div id='trade_live_chart'>
                         <div id='webtrader_chart' />

diff --git a/src/sass/_common/reskin.scss b/src/sass/_common/reskin.scss
@@ -49,7 +49,7 @@ body {
 }
 
 // Hide persistent chart showing in under the main chart
-div[data-highcharts-chart="0"]:not(.quill-purchase-popup div[data-highcharts-chart="0"]) {
+div.chart-wrapper[data-highcharts-chart="0"]:not(.quill-purchase-popup div.chart-wrapper[data-highcharts-chart="0"]) {
     position: absolute;
     top: -9999px;
 }
@@ -908,6 +908,7 @@ html.test {
 }
 
 .bottom-content-section {
+    position: relative;
     min-height: 400px;
     padding: 16px;
 
@@ -1099,7 +1100,8 @@ html.test {
 
 // Graph visibility control
 #tab_graph {
-    &.grap-hide {
+    &.graph-hide {
+        width: 100%;
         position: absolute;
         top: -9999px;
     }