CEC-4425: Fix responsive styles (#346)

* CEC-4425: Fix responsive styles
This commit is contained in:
Tristan Timblin
2023-06-05 15:30:54 -04:00
committed by GitHub
parent 7eed1dd25c
commit 022e88d400
4 changed files with 36 additions and 34 deletions

View File

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

View File

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

View File

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

View File

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