From 95937a453863192ac75bcd674b520907e47f2224 Mon Sep 17 00:00:00 2001
From: Mateusz Kwasniewski <kwasniewski.mateusz@gmail.com>
Date: Tue, 6 Dec 2022 17:01:14 +0100
Subject: [PATCH] adjusting mobile styles (#2604)

---
 .../ChangeRequestOverview.tsx                  | 18 ++++++++++++++++--
 .../ChangeRequestTitleCell.tsx                 |  2 +-
 .../ChangeRequestsTabs.styles.ts               |  4 ++++
 .../ChangeRequestsTabs/ChangeRequestsTabs.tsx  |  3 +++
 .../common/PageContent/PageContent.styles.ts   |  3 +++
 .../EnvironmentNameCell.tsx                    |  8 +++++++-
 .../src/component/project/Project/Project.tsx  |  1 +
 .../ProjectEnvironment/ProjectEnvironment.tsx  |  1 -
 .../__snapshots__/TagTypeList.test.tsx.snap    |  2 +-
 9 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx
index e3d626e699..cebe814369 100644
--- a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx
+++ b/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>
         </>
     );
 };
diff --git a/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestTitleCell/ChangeRequestTitleCell.tsx b/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestTitleCell/ChangeRequestTitleCell.tsx
index e2048ce665..06f5d97a41 100644
--- a/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestTitleCell/ChangeRequestTitleCell.tsx
+++ b/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}
diff --git a/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestsTabs.styles.ts b/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestsTabs.styles.ts
index 63916f448b..78be1d8861 100644
--- a/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestsTabs.styles.ts
+++ b/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,
diff --git a/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestsTabs.tsx b/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestsTabs.tsx
index 50101ff0c6..d37cd8c599 100644
--- a/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestsTabs.tsx
+++ b/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
diff --git a/frontend/src/component/common/PageContent/PageContent.styles.ts b/frontend/src/component/common/PageContent/PageContent.styles.ts
index ff8a025c55..417730287e 100644
--- a/frontend/src/component/common/PageContent/PageContent.styles.ts
+++ b/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',
diff --git a/frontend/src/component/environments/EnvironmentTable/EnvironmentNameCell/EnvironmentNameCell.tsx b/frontend/src/component/environments/EnvironmentTable/EnvironmentNameCell/EnvironmentNameCell.tsx
index 235981fa02..7f81601dba 100644
--- a/frontend/src/component/environments/EnvironmentTable/EnvironmentNameCell/EnvironmentNameCell.tsx
+++ b/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}
diff --git a/frontend/src/component/project/Project/Project.tsx b/frontend/src/component/project/Project/Project.tsx
index 5e91d3548e..6c1a8b8592 100644
--- a/frontend/src/component/project/Project/Project.tsx
+++ b/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
diff --git a/frontend/src/component/project/ProjectEnvironment/ProjectEnvironment.tsx b/frontend/src/component/project/ProjectEnvironment/ProjectEnvironment.tsx
index bdc3ca635b..4f96ae429c 100644
--- a/frontend/src/component/project/ProjectEnvironment/ProjectEnvironment.tsx
+++ b/frontend/src/component/project/ProjectEnvironment/ProjectEnvironment.tsx
@@ -153,7 +153,6 @@ const ProjectEnvironmentList = () => {
                 Cell: ({ row: { original } }: any) => (
                     <EnvironmentNameCell environment={original} />
                 ),
-                minWidth: 350,
             },
             {
                 Header: 'Type',
diff --git a/frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap b/frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap
index dcfa652387..dcf25eedb1 100644
--- a/frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap
+++ b/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"