FI-1979 Small adjustment to flex model on suite options (#358)

* adjust flex styles * remove padding --------- Co-authored-by: Alyssa Wang <awang@mitre.org>
inferno-framework · May 12, 2023 · 6dee1e7 · 6dee1e7
1 parent 4a0ae5e
commit 6dee1e7
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 17 deletions.
diff --git a/client/src/components/SuiteOptionsPage/SuiteOptionsPage.tsx b/client/src/components/SuiteOptionsPage/SuiteOptionsPage.tsx
@@ -151,36 +151,36 @@ const SuiteOptionsPage: FC<SuiteOptionsPageProps> = ({ testSuite }) => {
       maxHeight="100vh"
       role="main"
     >
-      {/* Title */}
-      <Box alignItems="center" maxWidth="800px" sx={windowIsSmall ? { m: 2 } : { mt: 6 }}>
-        <Typography
-          variant="h2"
-          component="h1"
-          align="center"
-          sx={{
-            color: lightTheme.palette.common.orangeDarker,
-            fontSize: windowIsSmall ? '2rem' : 'auto',
-          }}
-        >
-          {testSuite?.title}
-        </Typography>
-      </Box>
-
       <Box
         display="flex"
         flexWrap="wrap"
         alignItems="center"
         justifyContent="space-evenly"
         width="100%"
-        sx={windowIsSmall ? { overflow: 'auto' } : { mt: 4, pb: 8, overflow: 'hidden' }}
+        sx={windowIsSmall ? { overflow: 'auto' } : { mt: 4 }}
       >
-        {/* Description */}
         <Box
           maxWidth={descriptionWidth}
           maxHeight={windowIsSmall ? 'none' : '100%'}
           overflow="auto"
           my={3}
         >
+          {/* Title */}
+          <Box alignItems="center" maxWidth="800px" sx={windowIsSmall ? { m: 2 } : { mt: 6 }}>
+            <Typography
+              variant="h3"
+              component="h1"
+              align="center"
+              sx={{
+                color: lightTheme.palette.common.orangeDarker,
+                fontSize: windowIsSmall ? '2rem' : 'auto',
+                fontWeight: 'bolder',
+              }}
+            >
+              {testSuite?.title}
+            </Typography>
+          </Box>
+          {/* Description */}
           <Typography
             variant="h6"
             component="h2"

diff --git a/client/src/components/SuiteOptionsPage/styles.tsx b/client/src/components/SuiteOptionsPage/styles.tsx
@@ -16,5 +16,6 @@ export default makeStyles()((theme: Theme) => ({
     flexDirection: 'column',
     padding: '16px 0',
     borderRadius: '16px',
+    height: '100%',
   },
 }));