From 224b4b2157251304de6073daa72c934574b154d7 Mon Sep 17 00:00:00 2001
From: Tristan Timblin <ttimblin@fiskerinc.com>
Date: Wed, 21 Jun 2023 13:41:40 -0400
Subject: [PATCH] CEC-4545: fix responsive ecu table (#367)

* CEC-4545: fix responsive ecu table
---
 src/components/App/__snapshots__/App.test.js.snap      | 10 ++++++++++
 src/components/Cars/Status/ECUsTab.jsx                 |  6 +++---
 .../Cars/Status/__snapshots__/ECUsTab.test.jsx.snap    |  4 ++--
 .../Cars/Status/__snapshots__/index.test.jsx.snap      | 10 ++++++++++
 src/components/Cars/Status/index.jsx                   |  9 +++++++--
 src/components/Controls/CarECUsTable/index.jsx         |  6 +++---
 src/components/useStyles.jsx                           |  9 +++++++--
 7 files changed, 42 insertions(+), 12 deletions(-)

diff --git a/src/components/App/__snapshots__/App.test.js.snap b/src/components/App/__snapshots__/App.test.js.snap
index 00e9ac4..5a5eea9 100644
--- a/src/components/App/__snapshots__/App.test.js.snap
+++ b/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"
diff --git a/src/components/Cars/Status/ECUsTab.jsx b/src/components/Cars/Status/ECUsTab.jsx
index 7a1450c..b966407 100644
--- a/src/components/Cars/Status/ECUsTab.jsx
+++ b/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>
 );
 
diff --git a/src/components/Cars/Status/__snapshots__/ECUsTab.test.jsx.snap b/src/components/Cars/Status/__snapshots__/ECUsTab.test.jsx.snap
index 8ec2646..b37ef2e 100644
--- a/src/components/Cars/Status/__snapshots__/ECUsTab.test.jsx.snap
+++ b/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"
diff --git a/src/components/Cars/Status/__snapshots__/index.test.jsx.snap b/src/components/Cars/Status/__snapshots__/index.test.jsx.snap
index 7eb546e..633c3d4 100644
--- a/src/components/Cars/Status/__snapshots__/index.test.jsx.snap
+++ b/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"
diff --git a/src/components/Cars/Status/index.jsx b/src/components/Cars/Status/index.jsx
index 9e4a0b7..fe7bd66 100644
--- a/src/components/Cars/Status/index.jsx
+++ b/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>
diff --git a/src/components/Controls/CarECUsTable/index.jsx b/src/components/Controls/CarECUsTable/index.jsx
index 95d9b29..4c3fae0 100644
--- a/src/components/Controls/CarECUsTable/index.jsx
+++ b/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>
   );
 };
 
diff --git a/src/components/useStyles.jsx b/src/components/useStyles.jsx
index 9cb706f..40a9bba 100644
--- a/src/components/useStyles.jsx
+++ b/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",