CEC-4545: fix responsive ecu table (#367)

* CEC-4545: fix responsive ecu table

src/components/App/__snapshots__/App.test.js.snap

@@ -11276,6 +11276,7 @@ exports[`App Route /vehicle-status authenticated 1`] = `
             </div>
             <div
               aria-labelledby="tab-0"
+              class="makeStyles-tabContainer-0"
               id="tabpanel-0"
               role="tabpanel"
             >
@@ -11528,54 +11529,63 @@ exports[`App Route /vehicle-status authenticated 1`] = `
             </div>
             <div
               aria-labelledby="tab-1"
+              class="makeStyles-tabContainer-0"
               hidden=""
               id="tabpanel-1"
               role="tabpanel"
             />
             <div
               aria-labelledby="tab-2"
+              class="makeStyles-tabContainer-0"
               hidden=""
               id="tabpanel-2"
               role="tabpanel"
             />
             <div
               aria-labelledby="tab-3"
+              class="makeStyles-tabContainer-0"
               hidden=""
               id="tabpanel-3"
               role="tabpanel"
             />
             <div
               aria-labelledby="tab-4"
+              class="makeStyles-tabContainer-0"
               hidden=""
               id="tabpanel-4"
               role="tabpanel"
             />
             <div
               aria-labelledby="tab-5"
+              class="makeStyles-tabContainer-0"
               hidden=""
               id="tabpanel-5"
               role="tabpanel"
             />
             <div
               aria-labelledby="tab-6"
+              class="makeStyles-tabContainer-0"
               hidden=""
               id="tabpanel-6"
               role="tabpanel"
             />
             <div
               aria-labelledby="tab-7"
+              class="makeStyles-tabContainer-0"
               hidden=""
               id="tabpanel-7"
               role="tabpanel"
             />
             <div
               aria-labelledby="tab-8"
+              class="makeStyles-tabContainer-0"
               hidden=""
               id="tabpanel-8"
               role="tabpanel"
             />
             <div
               aria-labelledby="tab-9"
+              class="makeStyles-tabContainer-0"
               hidden=""
               id="tabpanel-9"
               role="tabpanel"

src/components/Cars/Status/ECUsTab.jsx

@@ -16,7 +16,7 @@ const MainForm = ({ vin }) => {
   } = useUserContext();
 
   return (
-    <div className={clsx(classes.paper, classes.tableSize)}>
+    <div className={clsx(classes.tableSize, classes.textCenterAlign)}>
       <Typography variant="h6" className={classes.labelInline}>
         Car ECUs
       </Typography>
@@ -25,9 +25,9 @@ const MainForm = ({ vin }) => {
   );
 };
 
-const CarUpdatesTab = ({vin}) => (
+const CarUpdatesTab = ({ vin }) => (
   <VehicleProvider>
-    <MainForm vin={vin}/>
+    <MainForm vin={vin} />
   </VehicleProvider>
 );
 

src/components/Cars/Status/__snapshots__/ECUsTab.test.jsx.snap

@@ -9,7 +9,7 @@ exports[`ECUsTab Render 1`] = `
       data-testid="mocked-userprovider"
     >
       <div
-        class="makeStyles-paper-0 makeStyles-tableSize-0"
+        class="makeStyles-tableSize-0 makeStyles-textCenterAlign-0"
       >
         <h6
           class="MuiTypography-root makeStyles-labelInline-0 MuiTypography-h6"
@@ -17,7 +17,7 @@ exports[`ECUsTab Render 1`] = `
           Car ECUs
         </h6>
         <div
-          class="makeStyles-paper-0 makeStyles-tableSize-0"
+          class="MuiTableContainer-root"
         >
           <table
             class="MuiTable-root"

src/components/Cars/Status/__snapshots__/index.test.jsx.snap

@@ -223,6 +223,7 @@ exports[`CarStatus Render 1`] = `
           </div>
           <div
             aria-labelledby="tab-0"
+            class="makeStyles-tabContainer-0"
             id="tabpanel-0"
             role="tabpanel"
           >
@@ -418,54 +419,63 @@ exports[`CarStatus Render 1`] = `
           </div>
           <div
             aria-labelledby="tab-1"
+            class="makeStyles-tabContainer-0"
             hidden=""
             id="tabpanel-1"
             role="tabpanel"
           />
           <div
             aria-labelledby="tab-2"
+            class="makeStyles-tabContainer-0"
             hidden=""
             id="tabpanel-2"
             role="tabpanel"
           />
           <div
             aria-labelledby="tab-3"
+            class="makeStyles-tabContainer-0"
             hidden=""
             id="tabpanel-3"
             role="tabpanel"
           />
           <div
             aria-labelledby="tab-4"
+            class="makeStyles-tabContainer-0"
             hidden=""
             id="tabpanel-4"
             role="tabpanel"
           />
           <div
             aria-labelledby="tab-5"
+            class="makeStyles-tabContainer-0"
             hidden=""
             id="tabpanel-5"
             role="tabpanel"
           />
           <div
             aria-labelledby="tab-6"
+            class="makeStyles-tabContainer-0"
             hidden=""
             id="tabpanel-6"
             role="tabpanel"
           />
           <div
             aria-labelledby="tab-7"
+            class="makeStyles-tabContainer-0"
             hidden=""
             id="tabpanel-7"
             role="tabpanel"
           />
           <div
             aria-labelledby="tab-8"
+            class="makeStyles-tabContainer-0"
             hidden=""
             id="tabpanel-8"
             role="tabpanel"
           />
           <div
             aria-labelledby="tab-9"
+            class="makeStyles-tabContainer-0"
             hidden=""
             id="tabpanel-9"
             role="tabpanel"

src/components/Cars/Status/index.jsx

@@ -147,8 +147,13 @@ const CarStatus = () => {
         </Tabs>
       </Box>
       {tabs.map((item, index) => (
-        <TabPanel key={index} value={tabIndex} index={index}>
+        <TabPanel
-          <item.component vin={vin}/>
+          key={index}
+          value={tabIndex}
+          index={index}
+          className={classes.tabContainer}
+        >
+          <item.component vin={vin} />
         </TabPanel>
       ))}
     </div>

src/components/Controls/CarECUsTable/index.jsx

@@ -2,12 +2,12 @@ import {
   Table,
   TableBody,
   TableCell,
+  TableContainer,
   TableFooter,
   TablePagination,
   TableRow,
   Tooltip
 } from "@material-ui/core";
-import clsx from "clsx";
 import React, { useEffect, useState } from "react";
 
 import { logger } from "../../../services/monitoring";
@@ -122,7 +122,7 @@ const CarECUsTable = ({ vin, token, classes }) => {
   };
 
   return (
-    <div className={clsx(classes.paper, classes.tableSize)}>
+    <TableContainer>
       <Table>
         <TableHeaderSortable
           classes={classes}
@@ -166,7 +166,7 @@ const CarECUsTable = ({ vin, token, classes }) => {
           </TableRow>
         </TableFooter>
       </Table>
-    </div>
+    </TableContainer>
   );
 };
 

src/components/useStyles.jsx

@@ -267,7 +267,12 @@ const useStyles = makeStyles((theme) => ({
     textDecoration: "inherit",
     color: "inherit",
   },
-  tableSize: { height: 700, width: "100%" },
+  tableSize: {
+    width: "100%",
+  },
+  tabContainer: {
+    maxWidth: "100%",
+  },
   whiteBackground: { backgroundColor: "White" },
   progressIcon: { width: 40, height: 40 },
   progressSuccess: { color: "green" },
@@ -288,7 +293,7 @@ const useStyles = makeStyles((theme) => ({
   },
   tableHeader: {
     textDecorationStyle: "solid",
-    fontWeight:500,
+    fontWeight: 500,
   },
   limitWidthTableCell: {
     maxWidth: "200px",