CEC-4576: fix vertical alignment of force push checkbox (#388)

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

@@ -11623,7 +11623,11 @@ exports[`App Route /vehicle-status authenticated 1`] = `
                         </div>
                         <div
                           class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
+                        >
+                          <div
+                            class="MuiBox-root MuiBox-root-0"
                           />
+                        </div>
                         <div
                           class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
                         >

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

@@ -167,7 +167,11 @@ exports[`VehicleDetailsTab Render 1`] = `
               </div>
               <div
                 class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
+              >
+                <div
+                  class="MuiBox-root MuiBox-root-0"
                 />
+              </div>
               <div
                 class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
               >

src/components/Cars/Status/Details/index.jsx

@@ -1,4 +1,4 @@
-import { Checkbox, FormControlLabel, Grid, Tooltip } from "@material-ui/core";
+import { Box, Checkbox, FormControlLabel, Grid, Tooltip } from "@material-ui/core";
 import DeleteIcon from "@material-ui/icons/Delete";
 import EditIcon from "@material-ui/icons/Edit";
 import UploadIcon from '@mui/icons-material/Upload';
@@ -157,7 +157,16 @@ const MainForm = ({ vin }) => {
             </p>
           </Grid>
         )}
-        <Grid item md={12} className={classes.textCenterAlign}>
+        <Grid
+          item
+          md={12}
+          className={classes.textCenterAlign}
+        >
+          <Box sx={{
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "flex-end"
+          }}>
             <RoleWrap
               groups={groups}
               providers={providers}
@@ -178,6 +187,7 @@ const MainForm = ({ vin }) => {
                 </Link>
               </Tooltip>
             </RoleWrap>
+          </Box>
         </Grid>
         <Grid item md={12} className={classes.textCenterAlign}>
           <RoleWrap

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

@@ -175,7 +175,11 @@ exports[`DetailsTab Render 1`] = `
                 </div>
                 <div
                   class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
+                >
+                  <div
+                    class="MuiBox-root MuiBox-root-0"
                   />
+                </div>
                 <div
                   class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
                 >

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

@@ -331,7 +331,11 @@ exports[`CarStatus Render 1`] = `
                     </div>
                     <div
                       class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
+                    >
+                      <div
+                        class="MuiBox-root MuiBox-root-0"
                       />
+                    </div>
                     <div
                       class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
                     >