Fixing visual bugs

- adapting the ScenarioComponent so that when two scenarios are compared the mobile version is used for screens <= lg - fixed a wrong prop.
amosproj · Jun 11, 2021 · edd33e2 · gandompm · Jun 12, 2021 · gandompm
1 parent 9129e5a
commit edd33e2
Showing 1 changed file with 11 additions and 4 deletions.
diff --git a/frontend/src/components/details/ScenarioComponent.js b/frontend/src/components/details/ScenarioComponent.js
@@ -17,7 +17,7 @@ class ScenarioComponent extends Component {
         return (
             <Container fluid={true} style={{ padding: 0, margin: 10, backgroundColor: 'white' }}>
                 <NavbarComponent
-                    loadComparePage={this.props.compareCanvas}
+                    loadComparePage={this.props.loadComparePage}
                     onCompareClick={this.props.onCompareClick}
                     scenarioName={this.props.scenarioName}
                     onExportClicked={this.props.onExportClicked}
@@ -50,15 +50,22 @@ class ScenarioComponent extends Component {
                     </Row>
                     <Row>
                         <div className='TableContainer'>
-                            {/* Swaps out the table with a mobile version for screens <= sm */}
-                            <Hidden smDown>
+                            {/* Swaps out the table with a mobile version for screens <= sm 
+                            And when on the compare version already swap out for screens <= lg */}
+                            <Hidden
+                                smDown={this.props.loadComparePage ? false : true}
+                                lgDown={this.props.loadComparePage ? true : false}
+                            >
                                 <TableComponent
                                     productName={this.props.selectedProduct.productName}
                                     modelName={this.props.selectedProduct.modelName}
                                     key={this.props.scenarioName}
                                 />
                             </Hidden>
-                            <Hidden mdUp>
+                            <Hidden
+                                mdUp={this.props.loadComparePage ? false : true}
+                                xlUp={this.props.loadComparePage ? true : false}
+                            >
                                 <MobileTableComponent
                                     productName={this.props.selectedProduct.productName}
                                     modelName={this.props.selectedProduct.modelName}