CEC-4425: Fix responsive styles (#346)

* CEC-4425: Fix responsive styles

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

@@ -467,7 +467,7 @@ exports[`App Route / authenticated 1`] = `
           class="makeStyles-drawerHeader-0"
         />
         <main
-          class="MuiContainer-root MuiContainer-maxWidthLg"
+          class="MuiContainer-root MuiContainer-disableGutters"
         >
           <div
             class="makeStyles-paper-0"
@@ -705,7 +705,7 @@ exports[`App Route / unauthenticated 1`] = `
           class="makeStyles-drawerHeader-0"
         />
         <main
-          class="MuiContainer-root MuiContainer-maxWidthLg"
+          class="MuiContainer-root MuiContainer-disableGutters"
         >
           <div
             class="makeStyles-paper-0 makeStyles-textJustifyAlign-0"
@@ -1203,7 +1203,7 @@ exports[`App Route /dashboards/0 authenticated 1`] = `
           class="makeStyles-drawerHeader-0"
         />
         <main
-          class="MuiContainer-root MuiContainer-maxWidthLg"
+          class="MuiContainer-root MuiContainer-disableGutters"
         >
           <div
             data-testid="mocked-vehicleprovider"
@@ -1364,7 +1364,7 @@ exports[`App Route /dashboards/0 unauthenticated 1`] = `
           class="makeStyles-drawerHeader-0"
         />
         <main
-          class="MuiContainer-root MuiContainer-maxWidthLg"
+          class="MuiContainer-root MuiContainer-disableGutters"
         >
           <div
             class="makeStyles-paper-0 makeStyles-textJustifyAlign-0"
@@ -1864,7 +1864,7 @@ exports[`App Route /home authenticated 1`] = `
           class="makeStyles-drawerHeader-0"
         />
         <main
-          class="MuiContainer-root MuiContainer-maxWidthLg"
+          class="MuiContainer-root MuiContainer-disableGutters"
         >
           <div
             class="makeStyles-paper-0"
@@ -2102,7 +2102,7 @@ exports[`App Route /home unauthenticated 1`] = `
           class="makeStyles-drawerHeader-0"
         />
         <main
-          class="MuiContainer-root MuiContainer-maxWidthLg"
+          class="MuiContainer-root MuiContainer-disableGutters"
         >
           <div
             class="makeStyles-paper-0 makeStyles-textJustifyAlign-0"
@@ -2638,7 +2638,7 @@ exports[`App Route /issue-info authenticated 1`] = `
           class="makeStyles-drawerHeader-0"
         />
         <main
-          class="MuiContainer-root MuiContainer-maxWidthLg"
+          class="MuiContainer-root MuiContainer-disableGutters"
         >
           <div
             class="makeStyles-paper-0 makeStyles-tableSize-0"
@@ -2750,7 +2750,7 @@ exports[`App Route /issue-info unauthenticated 1`] = `
           class="makeStyles-drawerHeader-0"
         />
         <main
-          class="MuiContainer-root MuiContainer-maxWidthLg"
+          class="MuiContainer-root MuiContainer-disableGutters"
         >
           <div
             class="makeStyles-paper-0 makeStyles-textJustifyAlign-0"
@@ -3250,7 +3250,7 @@ exports[`App Route /issues authenticated 1`] = `
           class="makeStyles-drawerHeader-0"
         />
         <main
-          class="MuiContainer-root MuiContainer-maxWidthLg"
+          class="MuiContainer-root MuiContainer-disableGutters"
         >
           <div
             data-testid="mocked-issueprovider"
@@ -3641,7 +3641,7 @@ exports[`App Route /issues unauthenticated 1`] = `
           class="makeStyles-drawerHeader-0"
         />
         <main
-          class="MuiContainer-root MuiContainer-maxWidthLg"
+          class="MuiContainer-root MuiContainer-disableGutters"
         >
           <div
             class="makeStyles-paper-0 makeStyles-textJustifyAlign-0"
@@ -4177,7 +4177,7 @@ exports[`App Route /package-deploy authenticated 1`] = `
           class="makeStyles-drawerHeader-0"
         />
         <main
-          class="MuiContainer-root MuiContainer-maxWidthLg"
+          class="MuiContainer-root MuiContainer-disableGutters"
         >
           <div
             data-testid="mocked-manifestsprovider"
@@ -4741,7 +4741,7 @@ exports[`App Route /package-deploy unauthenticated 1`] = `
           class="makeStyles-drawerHeader-0"
         />
         <main
-          class="MuiContainer-root MuiContainer-maxWidthLg"
+          class="MuiContainer-root MuiContainer-disableGutters"
         >
           <div
             class="makeStyles-paper-0 makeStyles-textJustifyAlign-0"
@@ -5293,7 +5293,7 @@ exports[`App Route /package-status authenticated 1`] = `
           class="makeStyles-drawerHeader-0"
         />
         <main
-          class="MuiContainer-root MuiContainer-maxWidthLg"
+          class="MuiContainer-root MuiContainer-disableGutters"
         >
           <div
             data-testid="mocked-manifestsprovider"
@@ -5684,7 +5684,7 @@ exports[`App Route /package-status unauthenticated 1`] = `
           class="makeStyles-drawerHeader-0"
         />
         <main
-          class="MuiContainer-root MuiContainer-maxWidthLg"
+          class="MuiContainer-root MuiContainer-disableGutters"
         >
           <div
             class="makeStyles-paper-0 makeStyles-textJustifyAlign-0"
@@ -6184,7 +6184,7 @@ exports[`App Route /packages authenticated 1`] = `
           class="makeStyles-drawerHeader-0"
         />
         <main
-          class="MuiContainer-root MuiContainer-maxWidthLg"
+          class="MuiContainer-root MuiContainer-disableGutters"
         >
           <div
             data-testid="mocked-manifestsprovider"
@@ -6733,7 +6733,7 @@ exports[`App Route /packages unauthenticated 1`] = `
           class="makeStyles-drawerHeader-0"
         />
         <main
-          class="MuiContainer-root MuiContainer-maxWidthLg"
+          class="MuiContainer-root MuiContainer-disableGutters"
         >
           <div
             class="makeStyles-paper-0 makeStyles-textJustifyAlign-0"
@@ -7231,7 +7231,7 @@ exports[`App Route /page-not-found authenticated 1`] = `
           class="makeStyles-drawerHeader-0"
         />
         <main
-          class="MuiContainer-root MuiContainer-maxWidthLg"
+          class="MuiContainer-root MuiContainer-disableGutters"
         >
           <div
             class="makeStyles-paper-0"
@@ -7277,7 +7277,7 @@ exports[`App Route /page-not-found unauthenticated 1`] = `
           class="makeStyles-drawerHeader-0"
         />
         <main
-          class="MuiContainer-root MuiContainer-maxWidthLg"
+          class="MuiContainer-root MuiContainer-disableGutters"
         >
           <div
             class="makeStyles-paper-0"
@@ -7323,7 +7323,7 @@ exports[`App Route /supplier/{email} unauthenticated 1`] = `
           class="makeStyles-drawerHeader-0"
         />
         <main
-          class="MuiContainer-root MuiContainer-maxWidthLg"
+          class="MuiContainer-root MuiContainer-disableGutters"
         >
           <div
             class="makeStyles-paper-0 makeStyles-textJustifyAlign-0"
@@ -7859,7 +7859,7 @@ exports[`App Route /tools/certificates/add authenticated 1`] = `
           class="makeStyles-drawerHeader-0"
         />
         <main
-          class="MuiContainer-root MuiContainer-maxWidthLg"
+          class="MuiContainer-root MuiContainer-disableGutters"
         >
           <div
             class="makeStyles-paper-0"
@@ -8133,7 +8133,7 @@ exports[`App Route /tools/certificates/add unauthenticated 1`] = `
           class="makeStyles-drawerHeader-0"
         />
         <main
-          class="MuiContainer-root MuiContainer-maxWidthLg"
+          class="MuiContainer-root MuiContainer-disableGutters"
         >
           <div
             class="makeStyles-paper-0 makeStyles-textJustifyAlign-0"
@@ -8539,7 +8539,7 @@ exports[`App Route /tools/security-dll authenticated 1`] = `
           class="makeStyles-drawerHeader-0"
         />
         <main
-          class="MuiContainer-root MuiContainer-maxWidthLg"
+          class="MuiContainer-root MuiContainer-disableGutters"
         >
           <form>
             <p>
@@ -8617,7 +8617,7 @@ exports[`App Route /tools/security-dll unauthenticated 1`] = `
           class="makeStyles-drawerHeader-0"
         />
         <main
-          class="MuiContainer-root MuiContainer-maxWidthLg"
+          class="MuiContainer-root MuiContainer-disableGutters"
         >
           <div
             class="makeStyles-paper-0 makeStyles-textJustifyAlign-0"
@@ -9153,7 +9153,7 @@ exports[`App Route /tools/sms/send authenticated 1`] = `
           class="makeStyles-drawerHeader-0"
         />
         <main
-          class="MuiContainer-root MuiContainer-maxWidthLg"
+          class="MuiContainer-root MuiContainer-disableGutters"
         >
           <div
             class="makeStyles-paper-0"
@@ -9344,7 +9344,7 @@ exports[`App Route /tools/sms/send unauthenticated 1`] = `
           class="makeStyles-drawerHeader-0"
         />
         <main
-          class="MuiContainer-root MuiContainer-maxWidthLg"
+          class="MuiContainer-root MuiContainer-disableGutters"
         >
           <div
             class="makeStyles-paper-0 makeStyles-textJustifyAlign-0"
@@ -9880,7 +9880,7 @@ exports[`App Route /vehicle-add authenticated 1`] = `
           class="makeStyles-drawerHeader-0"
         />
         <main
-          class="MuiContainer-root MuiContainer-maxWidthLg"
+          class="MuiContainer-root MuiContainer-disableGutters"
         >
           <div
             data-testid="mocked-vehicleprovider"
@@ -10489,7 +10489,7 @@ exports[`App Route /vehicle-add unauthenticated 1`] = `
           class="makeStyles-drawerHeader-0"
         />
         <main
-          class="MuiContainer-root MuiContainer-maxWidthLg"
+          class="MuiContainer-root MuiContainer-disableGutters"
         >
           <div
             class="makeStyles-paper-0 makeStyles-textJustifyAlign-0"
@@ -11025,7 +11025,7 @@ exports[`App Route /vehicle-status authenticated 1`] = `
           class="makeStyles-drawerHeader-0"
         />
         <main
-          class="MuiContainer-root MuiContainer-maxWidthLg"
+          class="MuiContainer-root MuiContainer-disableGutters"
         >
           <div
             class="makeStyles-paper-0 makeStyles-tableSize-0"
@@ -11551,7 +11551,7 @@ exports[`App Route /vehicle-status unauthenticated 1`] = `
           class="makeStyles-drawerHeader-0"
         />
         <main
-          class="MuiContainer-root MuiContainer-maxWidthLg"
+          class="MuiContainer-root MuiContainer-disableGutters"
         >
           <div
             class="makeStyles-paper-0 makeStyles-textJustifyAlign-0"
@@ -11612,7 +11612,7 @@ exports[`App Route /vehicle-status/vin/carupdateid unauthenticated 1`] = `
           class="makeStyles-drawerHeader-0"
         />
         <main
-          class="MuiContainer-root MuiContainer-maxWidthLg"
+          class="MuiContainer-root MuiContainer-disableGutters"
         >
           <div
             class="makeStyles-paper-0 makeStyles-textJustifyAlign-0"
@@ -12112,7 +12112,7 @@ exports[`App Route /vehicles authenticated 1`] = `
           class="makeStyles-drawerHeader-0"
         />
         <main
-          class="MuiContainer-root MuiContainer-maxWidthLg"
+          class="MuiContainer-root MuiContainer-disableGutters"
         >
           <div
             data-testid="mocked-vehicleprovider"
@@ -12554,7 +12554,7 @@ exports[`App Route /vehicles unauthenticated 1`] = `
           class="makeStyles-drawerHeader-0"
         />
         <main
-          class="MuiContainer-root MuiContainer-maxWidthLg"
+          class="MuiContainer-root MuiContainer-disableGutters"
         >
           <div
             class="makeStyles-paper-0 makeStyles-textJustifyAlign-0"

src/components/Cars/Status/index.jsx

@@ -135,6 +135,7 @@ const CarStatus = () => {
       <Box
         className={classes.tableToolbar}
         sx={{ borderBottom: 1, borderColor: "divider" }}
+        justifyContent="center"
       >
         <Tabs
           value={tabIndex}

src/components/Layouts/MenuDrawer.jsx

@@ -91,7 +91,7 @@ export default function MenuDrawer({ children }) {
         })}
       >
         <div className={classes.drawerHeader} />
-        <Container component="main">{children}</Container>
+        <Container disableGutters={true} maxWidth={false} component="main">{children}</Container>
       </main>
     </div>
   );

src/components/useStyles.jsx

@@ -127,6 +127,7 @@ const useStyles = makeStyles((theme) => ({
       duration: theme.transitions.duration.enteringScreen,
     }),
     marginLeft: 0,
+    maxWidth: `calc(100% - ${DRAWER_WIDTH}px)`,
   },
   rightToolbar: {
     marginLeft: "auto",
@@ -161,7 +162,7 @@ const useStyles = makeStyles((theme) => ({
     textAlign: "left",
     paddingLeft: theme.spacing(2),
     paddingRight: theme.spacing(1),
-    width: "100%",
+    maxWidth: "100%",
   },
   logo: {
     height: 60,