adjusting mobile styles (#2604)

frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx

@@ -29,6 +29,9 @@ const StyledAsideBox = styled(Box)(({ theme }) => ({
     width: '30%',
     display: 'flex',
     flexDirection: 'column',
+    [theme.breakpoints.down('sm')]: {
+        width: '100%',
+    },
 }));
 
 const StyledPaper = styled(Paper)(({ theme }) => ({
@@ -37,6 +40,10 @@ const StyledPaper = styled(Paper)(({ theme }) => ({
     width: '70%',
     padding: theme.spacing(1, 2),
     borderRadius: theme.shape.borderRadiusLarge,
+    [theme.breakpoints.down('sm')]: {
+        marginLeft: 0,
+        width: '100%',
+    },
 }));
 
 const StyledButtonBox = styled(Box)(({ theme }) => ({
@@ -49,6 +56,13 @@ const StyledInnerContainer = styled(Box)(({ theme }) => ({
     padding: theme.spacing(2),
 }));
 
+const ChangeRequestBody = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    [theme.breakpoints.down('sm')]: {
+        flexDirection: 'column',
+    },
+}));
+
 export const ChangeRequestOverview: FC = () => {
     const projectId = useRequiredPathParam('projectId');
     const [showCancelDialog, setShowCancelDialog] = useState(false);
@@ -139,7 +153,7 @@ export const ChangeRequestOverview: FC = () => {
     return (
         <>
             <ChangeRequestHeader changeRequest={changeRequest} />
-            <Box sx={{ display: 'flex' }}>
+            <ChangeRequestBody>
                 <StyledAsideBox>
                     <ChangeRequestTimeline state={changeRequest.state} />
                     <ConditionallyRender
@@ -272,7 +286,7 @@ export const ChangeRequestOverview: FC = () => {
                         can't be reopened.
                     </Typography>
                 </Dialogue>
-            </Box>
+            </ChangeRequestBody>
         </>
     );
 };

frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestTitleCell/ChangeRequestTitleCell.tsx

@@ -29,7 +29,7 @@ export const ChangeRequestTitleCell = ({
     }
 
     return (
-        <TextCell>
+        <TextCell sx={{ minWidth: '200px' }}>
             <StyledLink>
                 <Link
                     component={RouterLink}

frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestsTabs.styles.ts

@@ -4,6 +4,10 @@ export const useStyles = makeStyles()(theme => ({
     header: {
         padding: theme.spacing(0, 4),
     },
+    bodyClass: {
+        padding: theme.spacing(4),
+        overflowX: 'auto',
+    },
     tabContainer: {
         paddingLeft: 0,
         paddingBottom: 0,

frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestsTabs.tsx

@@ -211,6 +211,7 @@ export const ChangeRequestsTabs = ({
     return (
         <PageContent
             isLoading={loading}
+            bodyClass={classes.bodyClass}
             headerClass={classes.header}
             header={
                 <PageHeader
@@ -220,6 +221,8 @@ export const ChangeRequestsTabs = ({
                                 value={tabs[activeTab]?.title}
                                 indicatorColor="primary"
                                 textColor="primary"
+                                variant="scrollable"
+                                allowScrollButtonsMobile
                             >
                                 {tabs.map((tab, index) => (
                                     <Tab

frontend/src/component/common/PageContent/PageContent.styles.ts

@@ -21,6 +21,9 @@ export const useStyles = makeStyles()(theme => ({
         [theme.breakpoints.down('md')]: {
             padding: theme.spacing(2),
         },
+        [theme.breakpoints.down('sm')]: {
+            overflowX: 'auto',
+        },
     },
     paddingDisabled: {
         padding: '0',

frontend/src/component/environments/EnvironmentTable/EnvironmentNameCell/EnvironmentNameCell.tsx

@@ -30,7 +30,13 @@ export const EnvironmentNameCell = ({
     const { searchQuery } = useSearchHighlightContext();
 
     return (
-        <TextCell>
+        <TextCell
+            sx={theme => ({
+                [theme.breakpoints.up('sm')]: {
+                    minWidth: '350px',
+                },
+            })}
+        >
             <Highlighter search={searchQuery}>{environment.name}</Highlighter>
             <ConditionallyRender
                 condition={environment.protected}

frontend/src/component/project/Project/Project.tsx

@@ -240,6 +240,7 @@ const Project = () => {
                         value={activeTab?.path}
                         indicatorColor="primary"
                         textColor="primary"
+                        variant="scrollable"
                     >
                         {tabs.map(tab => (
                             <Tab

frontend/src/component/project/ProjectEnvironment/ProjectEnvironment.tsx

@@ -153,7 +153,6 @@ const ProjectEnvironmentList = () => {
                 Cell: ({ row: { original } }: any) => (
                     <EnvironmentNameCell environment={original} />
                 ),
-                minWidth: 350,
             },
             {
                 Header: 'Type',

frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap

@@ -109,7 +109,7 @@ exports[`renders an empty list correctly 1`] = `
         </div>
       </div>
       <div
-        className="body css-54jt3w-bodyContainer"
+        className="body css-142eaq1-bodyContainer"
       >
         <table
           className="MuiTable-root css-1h6dscb-MuiTable-root-table"