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

* CEC-4545: fix responsive ecu table

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}>
-          <item.component vin={vin}/>
+        <TabPanel
+          key={index}
+          value={tabIndex}
+          index={index}
+          className={classes.tabContainer}
+        >
+          <item.component vin={vin} />
         </TabPanel>
       ))}
     </div>