Improve responsive design

Author: randombenj

web/src/components/Project.tsx

@@ -3,7 +3,7 @@ import { type Project as ProjectType } from '../models/ProjectsResponse'
 import ProjectRepository from '../repositories/ProjectRepository'
 import styles from './../style/components/Project.module.css'
 
-import { Tooltip } from '@mui/material'
+import { Box, Tooltip } from '@mui/material'
 import FavoriteStar from './FavoriteStar'
 
 interface Props {
@@ -65,10 +65,15 @@ export default function Project(props: Props): JSX.Element {
           </div>
         </Link>
 
-        <Tooltip title={new Date(latestVersion.timestamp).toISOString().slice(0, -8).replace('T', ' ')} placement="left" arrow>
-          <div className={styles['secondary-typography']}>
+        <Tooltip title={new Date(latestVersion.timestamp).toISOString().slice(0, -8).replace('T', ' ')} placement="left" arrow >
+          <Box sx={{
+              display: {
+                xs: 'none',
+                sm: 'inherit'
+              }
+            }} className={styles['secondary-typography']}>
             {timeSince(new Date(latestVersion.timestamp))} ago
-          </div>
+          </Box>
         </Tooltip>
       </div>
       <div className={styles['project-header']}>

web/src/components/SearchBar.tsx

@@ -59,10 +59,8 @@ export default function SearchBar(props: Props): JSX.Element {
         p: '2px 4px',
         display: 'flex',
         alignItems: 'center',
-        width: 600,
-        marginTop: '24px',
+        maxWidth: 600,
         marginLeft: '16px',
-        marginBottom: '32px'
       }}
     >
       <InputBase

web/src/pages/Home.tsx

@@ -77,37 +77,53 @@ export default function Home(): JSX.Element {
 
       <div className={styles['project-overview']}>
         <Box sx={{
-          display: 'flex'
+          display: 'flex',
+          marginTop: '24px',
+          marginBottom: '32px',
+          flexWrap: {
+            sm: 'nowrap',
+            xs: 'wrap'
+          }
         }}>
 
-          <SearchBar showFavourites={!showAll} onShowFavourites={onShowFavourites} />
-
-          <Tooltip title="Upload Documentation" placement="right" arrow>
-            <IconButton
-              sx={{ marginLeft: 2, height: '46px', width: '46px', marginTop: '26px'}}
-              href="/upload"
-            >
-              <FileUpload></FileUpload>
-            </IconButton>
-          </Tooltip>
-
-          <Tooltip title="Claim a Project" placement="right" arrow>
-            <IconButton
-              sx={{ marginLeft: 2, height: '46px', width: '46px', marginTop: '26px'}}
-              href="/upload"
-            >
-              <Lock></Lock>
-            </IconButton>
-          </Tooltip>
-
-          <Tooltip title="Delete a project version" placement="right" arrow>
-            <IconButton
-              sx={{ marginLeft: 2, height: '46px', width: '46px', marginTop: '26px'}}
-              href="/delete"
-            >
-              <Delete></Delete>
-            </IconButton>
-          </Tooltip>
+          <Box sx={{
+            width: {
+              sm: '100%'
+            },
+            maxWidth: '600px',
+            marginBottom: '8px'
+          }}>
+            <SearchBar showFavourites={!showAll} onShowFavourites={onShowFavourites} />
+          </Box>
+
+          <Box sx={{ display: 'flex' }}>
+            <Tooltip title="Upload Documentation" placement="right" arrow>
+              <IconButton
+                sx={{ marginLeft: 2, height: '46px', width: '46px', marginTop: '2px'}}
+                href="/upload"
+              >
+                <FileUpload></FileUpload>
+              </IconButton>
+            </Tooltip>
+
+            <Tooltip title="Claim a Project" placement="right" arrow>
+              <IconButton
+                sx={{ marginLeft: 2, height: '46px', width: '46px', marginTop: '2px'}}
+                href="/upload"
+              >
+                <Lock></Lock>
+              </IconButton>
+            </Tooltip>
+
+            <Tooltip title="Delete a project version" placement="right" arrow>
+              <IconButton
+                sx={{ marginLeft: 2, height: '46px', width: '46px', marginTop: '2px'}}
+                href="/delete"
+              >
+                <Delete></Delete>
+              </IconButton>
+            </Tooltip>
+          </Box>
         </Box>
 
         { projects.length === 0 ?