From 6dee1e7c064b4d5ac96f6f4f01b2613a1919c065 Mon Sep 17 00:00:00 2001
From: Alyssa Wang <alyssa.c.wang@gmail.com>
Date: Fri, 12 May 2023 10:54:37 -0400
Subject: [PATCH] FI-1979 Small adjustment to flex model on suite options
 (#358)

* adjust flex styles

* remove padding

---------

Co-authored-by: Alyssa Wang <awang@mitre.org>
---
 .../SuiteOptionsPage/SuiteOptionsPage.tsx     | 34 +++++++++----------
 .../components/SuiteOptionsPage/styles.tsx    |  1 +
 2 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/client/src/components/SuiteOptionsPage/SuiteOptionsPage.tsx b/client/src/components/SuiteOptionsPage/SuiteOptionsPage.tsx
index 73cb2aeff..dce545416 100644
--- 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
index 3b0dd8b40..e232dca0b 100644
--- 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%',
   },
 }));