From 08fa6b183b1e9d085c453b117c0857f9fadd905c Mon Sep 17 00:00:00 2001
From: Pieter-Jan De Smijter <pieterjan.desmijter@gmail.com>
Date: Sat, 18 May 2024 17:11:34 +0200
Subject: [PATCH 1/3] student pages mobile friendly

---
 .../app/[locale]/components/CourseBanner.tsx  |  44 +-
 .../app/[locale]/components/CourseCard.tsx    | 201 +++-----
 .../[locale]/components/CourseControls.tsx    | 167 +++----
 .../components/ProjectDetailsPage.tsx         | 446 ++++++++----------
 .../[locale]/components/SubmitDetailsPage.tsx | 420 ++++++++---------
 .../app/[locale]/course/[course_id]/page.tsx  |  57 ++-
 6 files changed, 599 insertions(+), 736 deletions(-)

diff --git a/frontend/app/[locale]/components/CourseBanner.tsx b/frontend/app/[locale]/components/CourseBanner.tsx
index 85b0805e..89541dda 100644
--- a/frontend/app/[locale]/components/CourseBanner.tsx
+++ b/frontend/app/[locale]/components/CourseBanner.tsx
@@ -24,7 +24,6 @@ const CourseBanner = ({course_id}: CourseBannerProps) => {
                 if (error instanceof APIError) setError(error);
                 console.log(error);
             }
-
         };
 
         fetchCourse();
@@ -48,29 +47,34 @@ const CourseBanner = ({course_id}: CourseBannerProps) => {
             <Box
                 sx={{
                     backgroundColor: 'primary.main',
-                    color: 'whiteS',
+                    color: 'white',
                     display: 'flex',
-                    justifyContent: 'center',
+                    flexDirection: { xs: 'column', sm: 'row' },
+                    justifyContent: 'space-between',
                     alignItems: 'center',
-                    height: '150px',
+                    height: { xs: 'auto', sm: '150px' },
+                    padding: 2,
                     borderRadius: '16px',
+                    textAlign: 'center',
                 }}
             >
                 <Box
                     display="flex"
-                    justifyContent="flex-start"
+                    justifyContent={{ xs: 'center', sm: 'flex-start' }}
                     alignItems="center"
-                    width={"calc(100% - 200px)"}
-                    height={'100%'}
+                    width={{ xs: '100%', sm: "calc(100% - 200px)" }}
+                    height={{ xs: 'auto', sm: '100%' }}
+                    textAlign={{ xs: 'center', sm: 'left' }}
                 >
                     <Typography
-                        variant="h2"
-                        textAlign="center"
-                        noWrap={true}
-                        padding={0}
+                        variant="h4"
                         sx={{
                             color: 'white',
                             height: 'fit-content',
+                            fontSize: { xs: '1.5rem', sm: '2rem', md: '2.5rem' },
+                            whiteSpace: { xs: 'normal', sm: 'nowrap' },
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
                         }}
                     >
                         {course?.name + (course?.year === null ? "" : " " + course?.year)}
@@ -78,20 +82,18 @@ const CourseBanner = ({course_id}: CourseBannerProps) => {
                 </Box>
                 {user?.role !== 3 ? (
                     <Box
-                        height="100%"
                         display="flex"
-                        flexDirection="column"
-                        justifyContent="flex-start"
-                        alignItems="flex-start"
-                        textAlign="left"
-                        paddingY={2}
+                        justifyContent={{ xs: 'center', sm: 'flex-start' }}
+                        alignItems="center"
+                        paddingY={{ xs: 1, sm: 0 }}
+                        width={{ xs: '100%', sm: 'auto' }}
                     >
-                        <EditCourseButton course_id={course_id}/>
+                        <EditCourseButton course_id={course_id} />
                     </Box>
-                ): null}
+                ) : null}
             </Box>
         )
-    )
+    );
 }
 
-export default CourseBanner
\ No newline at end of file
+export default CourseBanner;
diff --git a/frontend/app/[locale]/components/CourseCard.tsx b/frontend/app/[locale]/components/CourseCard.tsx
index c5865fba..6efcd7aa 100644
--- a/frontend/app/[locale]/components/CourseCard.tsx
+++ b/frontend/app/[locale]/components/CourseCard.tsx
@@ -1,142 +1,79 @@
 "use client";
-import React, {useEffect, useState} from 'react';
-import {Card, CardContent, CardMedia, Typography, Box} from '@mui/material';
-import {Course, getLastSubmissionFromProject, getProjectsFromCourse, Project, Submission,} from "@lib/api";
-import {useTranslation} from "react-i18next";
+import React, { useEffect, useState } from 'react';
+import { Card, CardContent, CardMedia, Typography, Box } from '@mui/material';
+import { Course, getLastSubmissionFromProject, getProjectsFromCourse, Project, Submission } from '@lib/api';
+import { useTranslation } from 'react-i18next';
 import ListView from '@app/[locale]/components/ListView';
 
-const CourseCard = ({params: {course}}: { params: { course: Course } }) => {
-    const [projects, setProjects] = useState<Project[]>([]);
-    const [last_submission, setSubmission] =
-        useState<Submission>({
-            submission_id: 0,
-            group_id: 0,
-            submission_nr: 0,
-            file: '',
-            timestamp: '',
-            output_test: '',
-        });
-    const [hover, setHover] = useState(false);
-
-    const {t} = useTranslation()
-
-    useEffect(() => {
-        const fetchProjects = async () => {
-            try {
-                setProjects(await getProjectsFromCourse(course.course_id));
-                const fetched_submissions = new Map<number, Submission>();
-                for (let i = 0; i < projects.length; i++) {
-                    const project = projects[i];
-                    setSubmission(await getLastSubmissionFromProject(project.project_id));
-                    if (last_submission.group_id !== null) {
-                        fetched_submissions.set(project.project_id, last_submission);
-                    }
-                }
-            } catch (error) {
-                console.log(error);
-            }
+const CourseCard = ({ params: { course } }: { params: { course: Course } }) => {
+  const [projects, setProjects] = useState<Project[]>([]);
+  const [lastSubmission, setLastSubmission] = useState<Submission | null>(null);
+  const { t } = useTranslation();
 
-        };
-
-        fetchProjects();
-    }, [course.course_id]);
+  useEffect(() => {
+    const fetchProjects = async () => {
+      try {
+        const fetchedProjects = await getProjectsFromCourse(course.course_id);
+        setProjects(fetchedProjects);
+        
+        // Fetch last submission for each project
+        const promises = fetchedProjects.map(async (project) => {
+          const lastSubmission = await getLastSubmissionFromProject(project.project_id);
+          return { projectId: project.project_id, lastSubmission };
+        });
+        const projectSubmissions = await Promise.all(promises);
+        setLastSubmission(projectSubmissions);
+      } catch (error) {
+        console.error(error);
+      }
+    };
 
-    const headers = [t('name'), t('deadline'), t('view')]
-    const headers_backend = ['name', 'deadline', 'view']
+    fetchProjects();
+  }, [course.course_id]);
 
+  const headers = [t('name'), t('deadline'), t('view')];
+  const headers_backend = ['name', 'deadline', 'view'];
 
-    return (
-            <Card
-                sx={{
-                    width: 600,
-                    height: 450,
-                    margin: '16px',
-                    borderRadius: '8px',
-                    border: hover? 1 : 'none', // Conditional border
-                    transition: 'border 0.1s ease-in-out',
-                    borderColor: 'secondary.main',
-                    boxShadow: hover? 6 : 2, // Conditional shadow
-                }}
-            >
-                <CardMedia
-                    sx={{
-                        height: 75,
-                        backgroundColor: 'secondary.main',
-                    }}
-                    onMouseEnter={() => setHover(true)}
-                    onMouseLeave={() => setHover(false)}
-                >
-                    <Box
-                        display={'flex'}
-                        justifyContent="flex-start"
-                        alignItems="center"
-                        height={'100%'}
-                        width={'100%'}
-                        onClick={() => window.location.href = `/course/${course.course_id}`}
-                        sx={{
-                            cursor: 'pointer',
-                        }}
-                    >
-                        <Typography
-                            variant="h5"
-                            component="div"
-                            justifyContent={'center'}
-                            margin={2}
-                        >
-                            {course.name}
-                        </Typography>
-                    </Box>
-                </CardMedia>
-                <CardContent
-                    sx={{
-                        height: 300,
-                        width: '100%',
-                    }}
-                >
-                    <Typography
-                        variant="h6"
-                        component="div"
-                        justifyContent={'center'}
-                    >
-                        {t('projects')}
-                    </Typography>
-                    {
-                        projects.length == 0 ? (
-                            <Box
-                                height={'100%'}
-                                width={'100%'}
-                                display={'flex'}
-                                justifyContent={'center'}
-                                alignItems={'center'}
-                            >
-                                <Typography
-                                    variant={'h4'}
-                                    alignContent={'center'}
-                                    alignItems={'center'}
-                                    sx= {{
-                                        color: 'text.disabled'
-                                    }}
-                                >
-                                    {t('no_projects')}
-                                </Typography>
-                            </Box>
-                        ) : (
-                            <ListView
-                                admin={false}
-                                headers={headers}
-                                headers_backend={headers_backend}
-                                sortable={[true, true, false]}
-                                get={'projects'}
-                                get_id={course.course_id}
-                                search={false}
-                                page_size={3}
-                            />
-                        )
-                    }
-                </CardContent>
-            </Card>
-    );
+  return (
+    <Card sx={{ width: '100%', margin: '16px', borderRadius: '8px' }}>
+      <CardMedia sx={{ height: 150, backgroundColor: 'secondary.main' }}>
+        <Box
+          display="flex"
+          justifyContent="center"
+          alignItems="center"
+          height="100%"
+          onClick={() => window.location.href = `/course/${course.course_id}`}
+          sx={{ cursor: 'pointer' }}
+        >
+          <Typography variant="h5" component="div">
+            {course.name}
+          </Typography>
+        </Box>
+      </CardMedia>
+      <CardContent>
+        <Typography variant="h6" component="div" marginBottom={2}>
+          {t('projects')}
+        </Typography>
+        {projects.length === 0 ? (
+          <Typography variant="h4" color="text.disabled" align="center">
+            {t('no_projects')}
+          </Typography>
+        ) : (
+          <ListView
+            admin={false}
+            headers={headers}
+            headers_backend={headers_backend}
+            sortable={[true, true, false]}
+            get="projects"
+            get_id={course.course_id}
+            search={false}
+            pageSize={3}
+            lastSubmissions={lastSubmission}
+          />
+        )}
+      </CardContent>
+    </Card>
+  );
 };
 
-
 export default CourseCard;
diff --git a/frontend/app/[locale]/components/CourseControls.tsx b/frontend/app/[locale]/components/CourseControls.tsx
index a39c4203..53e4f1a9 100644
--- a/frontend/app/[locale]/components/CourseControls.tsx
+++ b/frontend/app/[locale]/components/CourseControls.tsx
@@ -1,97 +1,104 @@
-"use client";
-import React, {useEffect, useState} from 'react';
-import {Box, Button, MenuItem, Select, Stack, Typography} from '@mui/material';
+import React, { useEffect, useState } from 'react';
+import { Box, Button, Grid, MenuItem, Select, Stack, Typography } from '@mui/material';
 import FilterListIcon from '@mui/icons-material/FilterList';
 import AddCircleIcon from '@mui/icons-material/AddCircle';
 import ViewListIcon from '@mui/icons-material/ViewList';
 import ArchiveIcon from '@mui/icons-material/Archive';
 import SupervisorAccountIcon from '@mui/icons-material/SupervisorAccount';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
-import {useTranslation} from "react-i18next";
+import { useTranslation } from 'react-i18next';
 import Link from 'next/link';
-import {APIError, getUserData, UserData} from "@lib/api";
+import { APIError, getUserData, UserData } from '@lib/api';
 
-const CourseControls = ({selectedYear, onYearChange}) => {
-    const currentYear = new Date().getFullYear();
-    const academicYear = `${currentYear - 1}-${currentYear.toString().slice(-2)}`;
+const CourseControls = ({ selectedYear, onYearChange }) => {
+  const currentYear = new Date().getFullYear();
+  const academicYear = `${currentYear - 1}-${currentYear.toString().slice(-2)}`;
 
-    const [user, setUser] = useState<UserData | null>(null);
-    const [error, setError] = useState<APIError | null>(null);
+  const [user, setUser] = useState<UserData | null>(null);
+  const [error, setError] = useState<APIError | null>(null);
 
-    const {t} = useTranslation()
+  const { t } = useTranslation();
 
-    useEffect(() => {
-        const fetchUser = async () => {
-            try {
-                setUser(await getUserData());
-            } catch (error) {
-                if (error instanceof APIError) setError(error);
-                console.error(error);
-            }
+  useEffect(() => {
+    const fetchUser = async () => {
+      try {
+        setUser(await getUserData());
+      } catch (error) {
+        if (error instanceof APIError) setError(error);
+        console.error(error);
+      }
+    };
 
-        };
+    fetchUser();
+  }, []);
 
-        fetchUser();
-    }, []);
+  const years = [
+    `${currentYear - 2}-${(currentYear - 1).toString().slice(-2)}`,
+    academicYear,
+    `${currentYear}-${(currentYear + 1).toString().slice(-2)}`,
+  ];
 
-    const years = [
-        `${currentYear - 2}-${(currentYear - 1).toString().slice(-2)}`,
-        academicYear,
-        `${currentYear}-${(currentYear + 1).toString().slice(-2)}`
-    ];
-
-    return (
-        <Box sx={{py:1, px: 2, display: 'flex', alignItems: 'center', gap: 2}}>
-            <Stack direction="column" spacing={2}>
-                <Typography variant="h3" gutterBottom>
-                    {t("courses")}
-                </Typography>
-                <Stack direction="row" spacing={2} alignItems="center">
-                    <Button variant="contained" color="secondary" startIcon={<FilterListIcon/>}>
-                        {t("filter_courses")}
-                    </Button>
-                    {user?.role !== 3 ? (
-                        <Link href="/course/add" passHref>
-                            <Button variant="contained" color="secondary" startIcon={<AddCircleIcon/>}>
-                                {t("create_course")}
-                            </Button>
-                        </Link>
-                    ) : null
-                    }
-                    <Link href="/course/all" passHref>
-                        <Button variant="contained" color="secondary" startIcon={<ViewListIcon/>}>
-                            {t("all_courses")}
-                        </Button>
-                    </Link>
-                    <Link href="/course/archived" passHref>
-                        <Button variant="contained" color="secondary" startIcon={<ArchiveIcon/>}>
-                            {t("view_archive")}
-                        </Button>
-                    </Link>
-                    <Link href="/admin/users" passHref>
-                        <Button variant="contained" color="secondary" startIcon={<SupervisorAccountIcon/>}>
-                            {t("site users")}
-                        </Button>
-                    </Link>
-                    <Select
-                        value={selectedYear}
-                        onChange={onYearChange}
-                        displayEmpty
-                        color="secondary"
-                        variant="outlined"
-                        IconComponent={KeyboardArrowDownIcon}
-                        sx={{height: 40, '.MuiSelect-select': {pl: 1}}}
-                    >
-                        {years.map((year) => (
-                            <MenuItem key={year} value={year}>
-                                {year}
-                            </MenuItem>
-                        ))}
-                    </Select>
-                </Stack>
-            </Stack>
-        </Box>
-    );
+  return (
+    <Box sx={{ py: 1, px: 2 }}>
+      <Typography variant="h3" gutterBottom>
+        {t('courses')}
+      </Typography>
+      <Stack direction="column" spacing={2}>
+        <Grid container spacing={1} alignItems="center">
+          <Grid item>
+            <Button variant="contained" color="secondary" startIcon={<FilterListIcon />} sx={{ width: 'fit-content' }}>
+              {t('filter_courses')}
+            </Button>
+          </Grid>
+          {user?.role !== 3 && (
+            <Grid item>
+              <Link href="/course/add" passHref>
+                <Button variant="contained" color="secondary" startIcon={<AddCircleIcon />}>
+                  {t('create_course')}
+                </Button>
+              </Link>
+            </Grid>
+          )}
+          <Grid item>
+            <Link href="/course/all" passHref>
+              <Button variant="contained" color="secondary" startIcon={<ViewListIcon />}>
+                {t('all_courses')}
+              </Button>
+            </Link>
+          </Grid>
+          <Grid item>
+            <Link href="/course/archived" passHref>
+              <Button variant="contained" color="secondary" startIcon={<ArchiveIcon />}>
+                {t('view_archive')}
+              </Button>
+            </Link>
+          </Grid>
+          <Grid item>
+            <Link href="/admin/users" passHref>
+              <Button variant="contained" color="secondary" startIcon={<SupervisorAccountIcon />}>
+                {t('site_users')}
+              </Button>
+            </Link>
+          </Grid>
+        </Grid>
+        <Select
+          value={selectedYear}
+          onChange={onYearChange}
+          displayEmpty
+          color="secondary"
+          variant="outlined"
+          IconComponent={KeyboardArrowDownIcon}
+          sx={{ '.MuiSelect-select': { pl: 1 } }}
+        >
+          {years.map((year) => (
+            <MenuItem key={year} value={year}>
+              {year}
+            </MenuItem>
+          ))}
+        </Select>
+      </Stack>
+    </Box>
+  );
 };
 
 export default CourseControls;
diff --git a/frontend/app/[locale]/components/ProjectDetailsPage.tsx b/frontend/app/[locale]/components/ProjectDetailsPage.tsx
index 560fb87d..974b5d53 100644
--- a/frontend/app/[locale]/components/ProjectDetailsPage.tsx
+++ b/frontend/app/[locale]/components/ProjectDetailsPage.tsx
@@ -1,263 +1,223 @@
-"use client"
-
-import React, {useEffect, useState} from "react";
-import {getProject, getUserData, Project, UserData} from "@lib/api";
-import {useTranslation} from "react-i18next";
+'use client'
+import React, { useEffect, useState } from "react";
+import { getProject, getUserData, Project, UserData } from "@lib/api";
+import { useTranslation } from "react-i18next";
 import Box from "@mui/material/Box";
-
 import Typography from "@mui/material/Typography";
-import {Grid, IconButton, LinearProgress, ThemeProvider} from "@mui/material";
+import { Grid, IconButton, LinearProgress, ThemeProvider } from "@mui/material";
 import ProjectSubmissionsList from "@app/[locale]/components/ProjectSubmissionsList";
 import GroupSubmissionList from "@app/[locale]/components/GroupSubmissionList";
 import baseTheme from "@styles/theme";
 import Button from "@mui/material/Button";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
-import AddIcon from '@mui/icons-material/Add';
-import GroupIcon from '@mui/icons-material/Group';
-import EditIcon from '@mui/icons-material/Edit';
+import AddIcon from "@mui/icons-material/Add";
+import GroupIcon from "@mui/icons-material/Group";
+import EditIcon from "@mui/icons-material/Edit";
 import Divider from "@mui/material/Divider";
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import ExpandLessIcon from '@mui/icons-material/ExpandLess';
-import DownloadIcon from '@mui/icons-material/Download';
-import AccessTimeIcon from '@mui/icons-material/AccessTime';
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import ExpandLessIcon from "@mui/icons-material/ExpandLess";
+import DownloadIcon from "@mui/icons-material/Download";
+import AccessTimeIcon from "@mui/icons-material/AccessTime";
 
-
-const backend_url = process.env['NEXT_PUBLIC_BACKEND_URL'];
+const backend_url = process.env["NEXT_PUBLIC_BACKEND_URL"];
 
 interface ProjectDetailsPageProps {
-    locale: any;
-    project_id: number;
+  locale: any;
+  project_id: number;
 }
 
-const ProjectDetailsPage: React.FC<ProjectDetailsPageProps> = ({locale, project_id}) => {
-    const {t} = useTranslation();
-
-    const [project, setProject] = useState<Project>();
-    const [loadingProject, setLoadingProject] = useState<boolean>(true);
-    const [user, setUser] = useState<UserData | null>(null);
-    const [isExpanded, setIsExpanded] = useState(false);
-    const previewLength = 300;
-    const deadlineColorType = project?.deadline ? checkDeadline(project.deadline) : 'textSecondary';
-    const deadlineColor = baseTheme.palette[deadlineColorType]?.main || baseTheme.palette.text.secondary;
-
-    useEffect(() => {
-        const fetchUser = async () => {
-            try {
-                setUser(await getUserData());
-            } catch (error) {
-                console.error("There was an error fetching the user data:", error);
-            }
-        }
-
-        fetchUser();
-    }, [])
-
-    useEffect(() => {
-        const fetchProject = async () => {
-            try {
-                setProject(await getProject(project_id));
-            } catch (error) {
-                console.error("There was an error fetching the project:", error);
-            }
-        };
-
-        fetchProject().then(() => setLoadingProject(false));
-    }, [project_id]);
-
-    if (loadingProject) {
-        return <LinearProgress/>;
-    }
-
-    const toggleDescription = () => {
-        setIsExpanded(!isExpanded);
+const ProjectDetailsPage: React.FC<ProjectDetailsPageProps> = ({
+  locale,
+  project_id,
+}) => {
+  const { t } = useTranslation();
+
+  const [project, setProject] = useState<Project>();
+  const [loadingProject, setLoadingProject] = useState<boolean>(true);
+  const [user, setUser] = useState<UserData | null>(null);
+  const [isExpanded, setIsExpanded] = useState(false);
+  const previewLength = 300;
+  const deadlineColorType = project?.deadline
+    ? checkDeadline(project.deadline)
+    : "textSecondary";
+  const deadlineColor =
+    baseTheme.palette[deadlineColorType]?.main ||
+    baseTheme.palette.text.secondary;
+
+  useEffect(() => {
+    const fetchUser = async () => {
+      try {
+        setUser(await getUserData());
+      } catch (error) {
+        console.error("There was an error fetching the user data:", error);
+      }
     };
 
-    function formatDate(isoString: string): string {
-        const options: Intl.DateTimeFormatOptions = {
-            year: 'numeric',
-            month: 'long',
-            day: 'numeric',
-            hour: '2-digit',
-            minute: '2-digit',
-            hour12: false
-        };
-        const date = new Date(isoString);
-        return date.toLocaleString(locale, options);
-    }
+    fetchUser();
+  }, []);
 
-    function checkDeadline(deadline) {
-        const now = new Date();
-        const deadlineDate = new Date(deadline);
-        return now < deadlineDate ? 'success' : 'failure';
-    }
+  useEffect(() => {
+    const fetchProject = async () => {
+      try {
+        setProject(await getProject(project_id));
+      } catch (error) {
+        console.error("There was an error fetching the project:", error);
+      }
+    };
 
-    return (
-        <ThemeProvider theme={baseTheme}>
-            <div style={{height: 'fit-content', display: 'flex', padding: '20px'}}>
-                <Box sx={{width: 1 / 2}}>
-                    <Grid container spacing={2} alignItems="center">
-                        <Grid item xs={12}>
-                            <Button
-                                variant="outlined"
-                                color="primary"
-                                startIcon={<ArrowBackIcon/>}
-                                href={`/${locale}/course/${project?.course_id}`}
-                            >
-                                {t("return_course")}
-                            </Button>
-                            <Grid container alignItems="center" spacing={2} sx={{marginBottom: 1, marginTop: 2}}>
-                                <Grid item sx={{marginRight: 2}}>
-                                    <Typography variant={"h2"}>
-                                        {project?.name}
-                                    </Typography>
-                                </Grid>
-                                {user?.role !== 3 && (
-                                    <Grid item>
-                                        <Button
-                                            variant="contained"
-                                            color="secondary"
-                                            startIcon={<EditIcon/>}
-                                            href={`/${locale}/project/${project_id}/edit`}
-                                            sx={{
-                                                fontSize: '0.75rem',
-                                                padding: '6px 16px'
-                                            }}
-                                        >
-                                            {t("edit_project")}
-                                        </Button>
-                                    </Grid>
-                                )}
-                                <Grid item>
-                                    <Button
-                                        variant="contained"
-                                        color="secondary"
-                                        startIcon={<GroupIcon/>}
-                                        href={`/${locale}/project/${project_id}/groups`}
-                                        sx={{
-                                            fontSize: '0.75rem',
-                                            padding: '6px 16px'
-                                        }}
-                                    >
-                                        {t("groups")}
-                                    </Button>
-                                </Grid>
-                            </Grid>
-                            <Divider style={{marginBottom: 4}}/>
-                            <Typography variant={"h4"} sx={{marginBottom: 1}}>
-                                {t("assignment")}
-                            </Typography>
-                            <Typography>
-                                {project?.description && project?.description.length > previewLength && !isExpanded
-                                    ? `${project?.description.substring(0, previewLength)}...`
-                                    : project?.description
-                                }
-                            </Typography>
-                            {project?.description && project?.description.length > previewLength && (
-                                <IconButton
-                                    color="primary"
-                                    onClick={toggleDescription}
-                                    sx={{ flex: '0 0 auto', padding: 0 }}
-                                >
-                                    {isExpanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}
-                                </IconButton>
-                            )}
-                            <Typography variant={"h5"} sx={{marginTop: 4}}>
-                                {t("required_files")}
-                            </Typography>
-                            <Typography sx={{marginBottom: 2}}>
-                                {project?.file_structure}
-                            </Typography>
-                            <Typography variant={"h5"}>
-                                {t("conditions")}
-                            </Typography>
-                            <Typography sx={{marginBottom: 2}}>
-                                {project?.conditions}
-                            </Typography>
-                            <Typography>
-                                <b>Max score: </b>
-                                {project?.max_score}
-                            </Typography>
-                            <Typography>
-                                <b>Number of groups: </b>
-                                {project?.number_of_groups}
-                            </Typography>
-                            <Typography sx={{marginBottom: 2}}>
-                                <b>Group size: </b>
-                                {project?.group_size}
-                            </Typography>
-                            {user?.role !== 3 && (
-                                <div>
-                                    <Button
-                                        variant="contained"
-                                        color="secondary"
-                                        href={`${backend_url}/projects/${project_id}/download_testfiles`}
-                                        startIcon={<DownloadIcon />}
-                                    >
-                                        {t("test_files")}
-                                    </Button>
-                                </div>
-                            )}
-                        </Grid>
-                    </Grid>
-                </Box>
-                {user?.role === 3 ? (
-                    <Box sx={{
-                        marginTop: 10,
-                        display: 'flex',
-                        flexDirection: 'column',
-                        alignItems: 'center',
-                        width: 1 / 2,
-                    }}>
-                        <div style={{ display: "flex", alignItems: 'center', width: '100%', justifyContent: 'center' }}>
-                            <Typography variant={"h4"} style={{ marginRight: 20 }}>
-                                {t("submissions")}
-                            </Typography>
-                            <AccessTimeIcon style={{ marginRight: 4, color: deadlineColor }} />
-                            <Typography variant={"body1"} style={{ color: deadlineColor, marginRight: 20 }}>
-                                {project?.deadline ? formatDate(project.deadline) : "No Deadline"}
-                            </Typography>
-                            <Button
-                                variant="contained"
-                                color="primary"
-                                startIcon={<AddIcon/>}
-                                href={`/${locale}/project/${project_id}/submit`}
-                            >
-                                {t("add_submission")}
-                            </Button>
-                        </div>
-                        <GroupSubmissionList
-                            project_id={project_id}
-                            page_size={8}
-                            search={t("submission_search")}
-                        />
-                    </Box>
-                ) : (
-                    <Box sx={{
-                        marginTop: 10,
-                        display: 'flex',
-                        flexDirection: 'column',
-                        alignItems: 'center',
-                        width: 1 / 2,
-                    }}>
-                        <div style={{ display: "flex", alignItems: 'center', width: '100%', justifyContent: 'center' }}>
-                            <Typography variant={"h4"} style={{ marginRight: 20 }}>
-                                {t("submissions")}
-                            </Typography>
-                            <AccessTimeIcon style={{ marginRight: 4, color: deadlineColor }} />
-                            <Typography variant={"body1"} style={{ color: deadlineColor }}>
-                                {project?.deadline ? formatDate(project.deadline) : "No Deadline"}
-                            </Typography>
-                        </div>
-                        <ProjectSubmissionsList
-                            project_id={project_id}
-                            page_size={8}
-                            search={t("submission_search")}
-                        />
-                    </Box>
-                )}
+    fetchProject().then(() => setLoadingProject(false));
+  }, [project_id]);
+
+  if (loadingProject) {
+    return <LinearProgress />;
+  }
+
+  const toggleDescription = () => {
+    setIsExpanded(!isExpanded);
+  };
+
+  function formatDate(isoString: string): string {
+    const options: Intl.DateTimeFormatOptions = {
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+      hour: "2-digit",
+      minute: "2-digit",
+      hour12: false,
+    };
+    const date = new Date(isoString);
+    return date.toLocaleString(locale, options);
+  }
+
+  function checkDeadline(deadline) {
+    const now = new Date();
+    const deadlineDate = new Date(deadline);
+    return now < deadlineDate ? "success" : "failure";
+  }
+
+  return (
+    <ThemeProvider theme={baseTheme}>
+      <Box style={{ padding: "16px", maxWidth: "100%" }}>
+        <Grid container spacing={2} alignItems="center">
+          <Grid item xs={12}>
+            <Button
+              variant="outlined"
+              color="primary"
+              startIcon={<ArrowBackIcon />}
+              href={`/${locale}/course/${project?.course_id}`}
+            >
+              {t("return_course")}
+            </Button>
+            <Grid container alignItems="center" spacing={2} sx={{ my: 1 }}>
+              <Grid item xs={12} sm={6}>
+                <Typography variant="h4">{project?.name}</Typography>
+              </Grid>
+              {user?.role !== 3 && (
+                <Grid item xs={6} sm={3}>
+                  <Button
+                    variant="contained"
+                    color="secondary"
+                    startIcon={<EditIcon />}
+                    href={`/${locale}/project/${project_id}/edit`}
+                    sx={{ fontSize: "0.75rem", py: 1 }}
+                  >
+                    {t("edit_project")}
+                  </Button>
+                </Grid>
+              )}
+              <Grid item xs={6} sm={3}>
+                <Button
+                  variant="contained"
+                  color="secondary"
+                  startIcon={<GroupIcon />}
+                  href={`/${locale}/project/${project_id}/groups`}
+                  sx={{ fontSize: "0.75rem", py: 1 }}
+                >
+                  {t("groups")}
+                </Button>
+              </Grid>
+            </Grid>
+            <Divider style={{ marginBottom: "1rem" }} />
+            <Typography variant="h5">{t("assignment")}</Typography>
+            <Typography>
+              {project?.description &&
+              project?.description.length > previewLength &&
+              !isExpanded
+                ? `${project?.description.substring(0, previewLength)}...`
+                : project?.description}
+            </Typography>
+            {project?.description && project?.description.length > previewLength && (
+              <IconButton color="primary" onClick={toggleDescription}>
+                {isExpanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}
+              </IconButton>
+            )}
+            <Typography variant="h6">{t("required_files")}</Typography>
+            <Typography>{project?.file_structure}</Typography>
+            <Typography variant="h6">{t("conditions")}</Typography>
+            <Typography>{project?.conditions}</Typography>
+            <Typography>
+              <b>{t("max_score")}: </b>
+              {project?.max_score}
+            </Typography>
+            <Typography>
+              <b>{t("number_of_groups")}: </b>
+              {project?.number_of_groups}
+            </Typography>
+            <Typography>
+              <b>{t("group_size")}: </b>
+              {project?.group_size}
+            </Typography>
+            {user?.role !== 3 && (
+              <Button
+                variant="contained"
+                color="secondary"
+                href={`${backend_url}/projects/${project_id}/download_testfiles`}
+                startIcon={<DownloadIcon />}
+                sx={{ my: 1 }}
+              >
+                {t("test_files")}
+              </Button>
+            )}
+          </Grid>
+          <Grid item xs={12}>
+            <Typography variant="h5">{t("submissions")}</Typography>
+            <div style={{ display: "flex", alignItems: "center", my: 1 }}>
+              <AccessTimeIcon style ={{ marginRight: 4, color: deadlineColor }} />
+              <Typography variant="body1" style={{ color: deadlineColor }}>
+                {project?.deadline ? formatDate(project.deadline) : "No Deadline"}
+              </Typography>
             </div>
-        </ThemeProvider>
-    )
-}
+            {user?.role === 3 ? (
+              <Button
+                variant="contained"
+                color="primary"
+                startIcon={<AddIcon />}
+                href={`/${locale}/project/${project_id}/submit`}
+                sx={{ my: 1 }}
+              >
+                {t("add_submission")}
+              </Button>
+            ) : null}
+          </Grid>
+          <Grid item xs={12}>
+            {user?.role === 3 ? (
+              <GroupSubmissionList
+                project_id={project_id}
+                page_size={8}
+                search={t("submission_search")}
+              />
+            ) : (
+              <ProjectSubmissionsList
+                project_id={project_id}
+                page_size={8}
+                search={t("submission_search")}
+              />
+            )}
+          </Grid>
+        </Grid>
+      </Box>
+    </ThemeProvider>
+  );
+};
 
 export default ProjectDetailsPage;
diff --git a/frontend/app/[locale]/components/SubmitDetailsPage.tsx b/frontend/app/[locale]/components/SubmitDetailsPage.tsx
index e6dc178e..fc3fdb1b 100644
--- a/frontend/app/[locale]/components/SubmitDetailsPage.tsx
+++ b/frontend/app/[locale]/components/SubmitDetailsPage.tsx
@@ -1,245 +1,203 @@
-"use client"
-
-import React, {useEffect, useState} from 'react';
-import {useTranslation} from "react-i18next";
+'use client';
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Box,
+  Button,
+  Card,
+  CardContent,
+  Divider,
+  Grid,
+  IconButton,
+  Input,
+  LinearProgress,
+  ThemeProvider,
+  Typography,
+} from '@mui/material';
 import {
-    Box,
-    Button,
-    Card,
-    CardContent,
-    Divider,
-    Grid,
-    IconButton,
-    Input,
-    LinearProgress,
-    ThemeProvider,
-    Typography
-} from "@mui/material";
-import {getProject, Project, uploadSubmissionFile} from '@lib/api';
-import baseTheme from "@styles/theme";
-import ProjectReturnButton from "@app/[locale]/components/ProjectReturnButton";
+  getProject,
+  Project,
+  uploadSubmissionFile,
+} from '@lib/api';
+import baseTheme from '@styles/theme';
+import ProjectReturnButton from '@app/[locale]/components/ProjectReturnButton';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import PublishIcon from '@mui/icons-material/Publish';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import ErrorIcon from '@mui/icons-material/Error';
-import Tree from "@app/[locale]/components/Tree";
+import Tree from '@app/[locale]/components/Tree';
 
 interface SubmitDetailsPageProps {
-    locale: any;
-    project_id: number;
+  locale: any;
+  project_id: number;
 }
 
-const SubmitDetailsPage: React.FC<SubmitDetailsPageProps> = ({locale, project_id}) => {
-    const {t} = useTranslation();
-
-    const [projectData, setProjectData] = useState<Project>()
-    const [paths, setPaths] = useState<string[]>([]);
-    const [filepaths, setFilePaths] = useState<string[]>([]);
-    const [folderpaths, setFolderPaths] = useState<string[]>([]);
-    const [submitted, setSubmitted] = useState<string>("no");
-    const [loadingProject, setLoadingProject] = useState<boolean>(true);
-    const [isExpanded, setIsExpanded] = useState(false);
-    const previewLength = 300;
-
-
-    const toggleDescription = () => {
-        setIsExpanded(!isExpanded);
-    }
-
-    const handleSubmit = async (e) => {
-        setSubmitted(await uploadSubmissionFile(e, project_id));
-    }
-
-    useEffect(() => {
-        const fetchProject = async () => {
-            try {
-                const project: Project = await getProject(+project_id);
-                setProjectData(project)
-            } catch (e) {
-                console.error(e)
-            }
-        }
-        fetchProject().then(() => setLoadingProject(false));
-    }, [project_id]);
-
-    function folderAdded(event: any) {
-        console.log(event.target.id)
-        let newpaths: string[] = []
-        let result: string[] = []
-        if(event.target.id === "filepicker2"){
-            for(const file of event.target.files){
-                newpaths.push(file.name)
-            }
-            setFilePaths(newpaths);
-            result = [...folderpaths, ...newpaths]
-        }else{
-            for (const file of event.target.files) {
-                let text: string = file.webkitRelativePath;
-                if (text.includes("/")) {
-                    text = text.substring((text.indexOf("/") ?? 0) + 1, text.length);
-                }
-                newpaths.push(text);
-            }
-            setFolderPaths(newpaths);
-            result = [...filepaths, ...newpaths]
+const SubmitDetailsPage: React.FC<SubmitDetailsPageProps> = ({
+  locale,
+  project_id,
+}) => {
+  const { t } = useTranslation();
+
+  const [projectData, setProjectData] = useState<Project>();
+  const [paths, setPaths] = useState<string[]>([]);
+  const [filepaths, setFilePaths] = useState<string[]>([]);
+  const [folderpaths, setFolderPaths] = useState<string[]>([]);
+  const [submitted, setSubmitted] = useState<string>('no');
+  const [loadingProject, setLoadingProject] = useState<boolean>(true);
+  const [isExpanded, setIsExpanded] = useState(false);
+  const previewLength = 300;
+
+  const toggleDescription = () => {
+    setIsExpanded(!isExpanded);
+  };
+
+  const handleSubmit = async (e) => {
+    setSubmitted(await uploadSubmissionFile(e, project_id));
+  };
+
+  useEffect(() => {
+    const fetchProject = async () => {
+      try {
+        const project: Project = await getProject(+project_id);
+        setProjectData(project);
+      } catch (e) {
+        console.error(e);
+      }
+    };
+    fetchProject().then(() => setLoadingProject(false));
+  }, [project_id]);
+
+  function folderAdded(event: any) {
+    let newpaths: string[] = [];
+    let result: string[] = [];
+    if (event.target.id === 'filepicker2') {
+      for (const file of event.target.files) {
+        newpaths.push(file.name);
+      }
+      setFilePaths(newpaths);
+      result = [...folderpaths, ...newpaths];
+    } else {
+      for (const file of event.target.files) {
+        let text: string = file.webkitRelativePath;
+        if (text.includes('/')) {
+          text = text.substring((text.indexOf('/') ?? 0) + 1, text.length);
         }
-        console.log(result)
-        setPaths(result)
-    }
-
-    if (loadingProject) {
-        return <LinearProgress/>;
+        newpaths.push(text);
+      }
+      setFolderPaths(newpaths);
+      result = [...filepaths, ...newpaths];
     }
-
-    return (
-        <ThemeProvider theme={baseTheme}>
-            <Grid container justifyContent="center" alignItems="flex-start" style={{ width: 'fit-content', maxWidth: '100%' }}>
-                <Grid item style={{padding: 20}}>
-                    <ProjectReturnButton locale={locale} project_id={projectData?.project_id} />
-                </Grid>
-                <Grid item style={{padding: 20, marginRight: "233px"}}>
-                    <Card raised style={{width: 800}}>
-                        <CardContent>
-                            <Typography
-                                variant="h3"
-                                sx={{
-                                    fontWeight: 'medium'
-                                }}
-                            >
-                                {projectData?.name}
-                            </Typography>
-                            <Divider style={{marginBottom: 10, marginTop: 10}}/>
-                            <Typography>
-                                {projectData?.description && projectData?.description.length > previewLength && !isExpanded
-                                    ? `${projectData?.description.substring(0, previewLength)}...`
-                                    : projectData?.description
-                                }
-                            </Typography>
-                            {projectData?.description && projectData?.description.length > previewLength && (
-                                <IconButton
-                                    color="primary"
-                                    onClick={toggleDescription}
-                                    sx={{flex: '0 0 auto', padding: 0}}
-                                >
-                                    {isExpanded ? <ExpandLessIcon/> : <ExpandMoreIcon/>}
-                                </IconButton>
-                            )}
-                            <Typography
-                                variant="h6"
-                                sx={{
-                                    fontWeight: 'bold',
-                                    marginTop: 2
-                                }}
-                            >
-                                {t('upload_folders')}
-                            </Typography>
-
-                            <Box component="form" onSubmit={handleSubmit} encType="multipart/form-data">
-                                <div style={{height: '4em'}}>
-                                    <Input
-                                        sx={{
-                                            border: '2px dashed',
-                                            borderColor: baseTheme.palette.primary.main,
-                                            borderRadius: 2,
-                                            textAlign: 'center',
-                                            marginTop: 1,
-                                            p: 4,
-                                            height: '2em',
-                                            cursor: 'pointer',
-                                            '&:hover': {
-                                                backgroundColor: baseTheme.palette.background.default,
-                                            },
-                                        }}
-                                        onChange={folderAdded}
-                                        type="file"
-                                        id="filepicker"
-                                        name="fileList"
-                                        inputProps={{webkitdirectory: 'true', multiple: true}}
-                                        style={{position: 'absolute'}}
-                                    />
-                                </div>
-
-                                <Typography
-                                    variant="h6"
-                                    sx={{
-                                        fontWeight: 'bold',
-                                        marginTop: 2
-                                    }}
-                                >
-                                    {t('files')}
-                                </Typography>
-
-                                <div style={{height: '4em'}}>
-                                    <Input
-                                        sx={{
-                                            border: '2px dashed',
-                                            borderColor: baseTheme.palette.primary.main,
-                                            borderRadius: 2,
-                                            textAlign: 'center',
-                                            marginTop: 1,
-                                            p: 4,
-                                            height: '2em',
-                                            cursor: 'pointer',
-                                            '&:hover': {
-                                                backgroundColor: baseTheme.palette.background.default,
-                                            },
-                                        }}
-                                        onChange={folderAdded}
-                                        type="file"
-                                        id="filepicker2"
-                                        name="fileList2"
-                                        inputProps={{multiple: true}}
-                                        style={{position: 'absolute'}}
-                                    />
-                                </div>
-                                
-
-                                <Tree paths={paths}/>
-
-                                {submitted['result'] === 'ok' && (
-                                    <Box sx={{
-                                        display: 'flex',
-                                        alignItems: 'center',
-                                        color: baseTheme.palette.success.main,
-                                        mb: 1
-                                    }}>
-                                        <CheckCircleIcon sx={{mr: 1}}/>
-                                        <Typography variant="h6" sx={{fontWeight: 'bold', fontSize: '0.875rem'}}>
-                                            {t('submitted')}
-                                        </Typography>
-                                    </Box>
-                                )}
-                                {submitted['result'] === 'error' && (
-                                    <Box sx={{
-                                        display: 'flex',
-                                        alignItems: 'center',
-                                        color: baseTheme.palette.failure?.main,
-                                        mb: 1
-                                    }}>
-                                        <ErrorIcon sx={{mr: 1}}/>
-                                        <Typography variant="h6" sx={{fontWeight: 'bold', fontSize: '0.875rem'}}>
-                                            {t('submission_error')}: {t(submitted['errorcode'])}
-                                        </Typography>
-                                    </Box>
-                                )}
-                                {submitted['result'] !== 'ok' && (
-                                    <Button
-                                        variant="contained"
-                                        color="primary"
-                                        startIcon={<PublishIcon/>}
-                                        type="submit"
-                                    >
-                                        {t('submit')}
-                                    </Button>
-                                )}
-                            </Box>
-                        </CardContent>
-                    </Card>
-                </Grid>
-            </Grid>
-        </ThemeProvider>
-    );
-}
+    setPaths(result);
+  }
+
+  if (loadingProject) {
+    return <LinearProgress />;
+  }
+
+  return (
+    <ThemeProvider theme={baseTheme}>
+      <Grid container justifyContent="center" alignItems="flex-start">
+        <Grid item xs={12} style={{ padding: 20 }}>
+          <ProjectReturnButton locale={locale} project_id={projectData?.project_id} />
+        </Grid>
+        <Grid item xs={12} style={{ padding: 20 }}>
+          <Card raised>
+            <CardContent>
+              <Typography variant="h3" sx={{ fontWeight: 'medium' }}>
+                {projectData?.name}
+              </Typography>
+              <Divider style={{ marginBottom: 10, marginTop: 10 }} />
+              <Typography>
+                {projectData?.description && projectData?.description.length > previewLength && !isExpanded
+                  ? `${projectData?.description.substring(0, previewLength)}...`
+                  : projectData?.description}
+              </Typography>
+              {projectData?.description && projectData?.description.length > previewLength && (
+                <IconButton color="primary" onClick={toggleDescription} sx={{ padding: 0 }}>
+                  {isExpanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}
+                </IconButton>
+              )}
+              <Typography variant="h6" sx={{ fontWeight: 'bold', marginTop: 2 }}>
+                {t('upload_folders')}
+              </Typography>
+
+              <Box component="form" onSubmit={handleSubmit} encType="multipart/form-data">
+                <Input
+                  sx={{
+                    border: '2px dashed',
+                    borderColor: baseTheme.palette.primary.main,
+                    borderRadius: 2,
+                    textAlign: 'center',
+                    marginTop: 1,
+                    p: 4,
+                    cursor: 'pointer',
+                    '&:hover': {
+                      backgroundColor: baseTheme.palette.background.default,
+                    },
+                  }}
+                  onChange={folderAdded}
+                  type="file"
+                  id="filepicker"
+                  name="fileList"
+                  inputProps={{ webkitdirectory: 'true', multiple: true }}
+                />
+
+                <Typography variant="h6" sx={{ fontWeight: 'bold', marginTop: 2 }}>
+                  {t('files')}
+                </Typography>
+
+                <Input
+                  sx={{
+                    border: '2px dashed',
+                    borderColor: baseTheme.palette.primary.main,
+                    borderRadius: 2,
+                    textAlign: 'center',
+                    marginTop: 1,
+                    p: 4,
+                    cursor: 'pointer',
+                    '&:hover': {
+                      backgroundColor: baseTheme.palette.background.default,
+                    },
+                  }}
+                  onChange={folderAdded}
+                  type="file"
+                  id="filepicker2"
+                  name="fileList2"
+                  inputProps={{ multiple: true }}
+                />
+
+                <Tree paths={paths} />
+
+                {submitted === 'ok' && (
+                  <Box sx={{ display: 'flex', alignItems: 'center', color: baseTheme.palette.success.main, mb: 1 }}>
+                    <CheckCircleIcon sx={{ mr: 1 }} />
+                   
+                    <Typography variant="h6" sx={{ fontWeight: 'bold', fontSize: '0.875rem' }}>
+                      {t('submitted')}
+                    </Typography>
+                  </Box>
+                )}
+                {submitted === 'error' && (
+                  <Box sx={{ display: 'flex', alignItems: 'center', color: baseTheme.palette.error.main, mb: 1 }}>
+                    <ErrorIcon sx={{ mr: 1 }} />
+                    <Typography variant="h6" sx={{ fontWeight: 'bold', fontSize: '0.875rem' }}>
+                      {t('submission_error')}: {t(submitted['errorcode'])}
+                    </Typography>
+                  </Box>
+                )}
+                {submitted !== 'ok' && (
+                  <Button variant="contained" color="primary" startIcon={<PublishIcon />} type="submit">
+                    {t('submit')}
+                  </Button>
+                )}
+              </Box>
+            </CardContent>
+          </Card>
+        </Grid>
+      </Grid>
+    </ThemeProvider>
+  );
+};
 
 export default SubmitDetailsPage;
diff --git a/frontend/app/[locale]/course/[course_id]/page.tsx b/frontend/app/[locale]/course/[course_id]/page.tsx
index 53935d6e..9f0e7610 100644
--- a/frontend/app/[locale]/course/[course_id]/page.tsx
+++ b/frontend/app/[locale]/course/[course_id]/page.tsx
@@ -1,6 +1,6 @@
 import initTranslations from "@app/i18n";
 import TranslationsProvider from "@app/[locale]/components/TranslationsProvider";
-import {Box, Typography} from "@mui/material";
+import { Box, Typography, Grid } from "@mui/material";
 import NavBar from "@app/[locale]/components/NavBar";
 import CourseBanner from "@app/[locale]/components/CourseBanner";
 import CourseDetails from "@app/[locale]/components/CourseDetails";
@@ -24,37 +24,38 @@ export default async function Course({params: {locale, course_id}, searchParams:
             locale={locale}
             namespaces={i18nNamespaces}
         >
-            <JoinCourseWithToken token={token} course_id={course_id}></JoinCourseWithToken>
-            <NavBar/>
+            <JoinCourseWithToken token={token} course_id={course_id} />
+            <NavBar />
             <Box
                 sx={{
                     paddingTop: 5,
                     width: '100%',
+                    px: { xs: 2, sm: 3, md: 5 },
                 }}
             >
-                <CourseBanner course_id={course_id}/>
-                <CourseDetails course_id={course_id}/>
+                <CourseBanner course_id={course_id} />
+                <CourseDetails course_id={course_id} />
+                <Grid container alignItems="center" spacing={2} mt={2}>
+                    <Grid item xs={12} sm="auto">
+                        <Typography
+                            variant="h4"
+                            sx={{
+                                fontWeight: 'medium',
+                                textAlign: { xs: 'center', sm: 'left' },
+                            }}
+                        >
+                            {t('projects')}
+                        </Typography>
+                    </Grid>
+                    <Grid item xs={12} sm="auto">
+                        <Box display="flex" justifyContent={{ xs: 'center', sm: 'flex-start' }}>
+                            <AddProjectButton course_id={course_id} />
+                        </Box>
+                    </Grid>
+                </Grid>
                 <Box
-                    display={'flex'}
-                    justifyContent={'flex-start'}
-                    width={'fit-content'}
-                    alignItems={'center'}
-                    marginTop={2}
-                >
-                    <Typography
-                        variant="h3"
-                        sx={{
-                            fontWeight: 'medium',
-                            paddingRight: 2,
-                        }}
-                    >
-                        {t('projects')}
-                    </Typography>
-                    <AddProjectButton course_id={course_id}/>
-                </Box>
-                <Box
-                    justifyContent={'left'}
-                    width={'100%'}
+                    justifyContent="left"
+                    width="100%"
                 >
                     <ListView
                         search_text={t('search_for_project')}
@@ -65,11 +66,9 @@ export default async function Course({params: {locale, course_id}, searchParams:
                         get={'projects'}
                         get_id={course_id}
                     />
-
                 </Box>
-                <StudentCoTeacherButtons course_id={course_id}/>
+                <StudentCoTeacherButtons course_id={course_id} />
             </Box>
-
         </TranslationsProvider>
     )
-}
\ No newline at end of file
+}

From c4f691dae21cd5d50a08f40287411bb8f246f93a Mon Sep 17 00:00:00 2001
From: Pieter-Jan De Smijter <pieterjan.desmijter@gmail.com>
Date: Sat, 18 May 2024 17:43:44 +0200
Subject: [PATCH 2/3] teacher pages mobile

---
 .../[project_id]/edit/project_styles.css      | 116 +++++++++++-------
 1 file changed, 75 insertions(+), 41 deletions(-)

diff --git a/frontend/app/[locale]/project/[project_id]/edit/project_styles.css b/frontend/app/[locale]/project/[project_id]/edit/project_styles.css
index f33b4c54..c6f08ad4 100644
--- a/frontend/app/[locale]/project/[project_id]/edit/project_styles.css
+++ b/frontend/app/[locale]/project/[project_id]/edit/project_styles.css
@@ -1,75 +1,109 @@
-.typographyStyle, .MuiTypography-h5.typographyStyle {
-    font-weight: bold !important;
-    margin: 5px 0 0 0 !important;
-}
-
-.pageBoxLeft {
-    margin-top: 20px !important;
-    padding: 50px 50px 50px 100px !important;
+/* Existing styles */
+.typographyStyle,
+.MuiTypography-h5.typographyStyle {
+    font-weight: bold!important;
+    margin: 5px 0 0 0!important;
 }
 
+.pageBoxLeft,
 .pageBoxRight {
-    margin-top: 64px !important;
-    padding: 50px 50px 50px 100px !important;
+    margin-top: 20px!important;
+    padding: 50px 50px 50px 100px!important;
 }
 
-.conditionsText .MuiTypography-body1.ConditionsText {}
+@media (max-width: 768px) {
+    .container {
+         display: flex;
+         flex-direction: column;
+     }
+ 
+    .pageBoxLeft,
+    .pageBoxRight {
+         width: 100%; /* Ensure full width on mobile */
+         margin-top: 0; /* Remove unnecessary top margin */
+     }
+ }
+
+.conditionsText.MuiTypography-body1.ConditionsText {}
 
 .conditionsHelp {
-    font-size: large !important;
-    margin-left: 5px !important;
+    font-size: large!important;
+    margin-left: 5px!important;
 }
 
 .conditionsBox {
-    display: flex !important;
-    flex-direction: column !important;
+    display: flex!important;
+    flex-direction: column!important;
 }
 
 .conditionsSummation {
-    width: 100% !important;
-    margin-bottom: 10px !important;
+    width: 100%!important;
+    margin-bottom: 10px!important;
 }
 
 .buttonsGrid {
-    padding: 10px !important;
+    padding: 10px!important;
 }
 
 .titleGrids {
-    margin: 0 !important;
-    width: 100% !important;
+    margin: 0!important;
+    width: 100%!important;
 }
 
 .assignmentTextField {
-    width: 100% !important;
+    width: 100%!important;
 }
 
 .uploadInput {
-    display: none !important;
+    display: none!important;
 }
 
 .dialogPadding {
-    padding: 10px !important;
+    padding: 10px!important;
 }
 
 .dialogRemove {
-    background-color: #D0E4FF !important;
-    padding: 15px 30px !important;
-    margin-left: 15px !important;
-    border-radius: 20px !important;
-    border: none !important;
-    cursor: pointer !important;
-    font-weight: bold !important;
-    font-size: 1.2em !important;
+    background-color: #D0E4FF!important;
+    padding: 15px 30px!important;
+    margin-left: 15px!important;
+    border-radius: 20px!important;
+    border: none!important;
+    cursor: pointer!important;
+    font-weight: bold!important;
+    font-size: 1.2em!important;
 }
 
 .dialogCancel {
-    background-color: #D0E4FF !important;
-    padding: 15px 30px !important;
-    margin-left: 30px !important;
-    margin-right: 15px !important;
-    border-radius: 20px !important;
-    border: none !important;
-    cursor: pointer !important;
-    font-weight: bold !important;
-    font-size: 1.2em !important;
-}
\ No newline at end of file
+    background-color: #D0E4FF!important;
+    padding: 15px 30px!important;
+    margin-left: 30px!important;
+    margin-right: 15px!important;
+    border-radius: 20px!important;
+    border: none!important;
+    cursor: pointer!important;
+    font-weight: bold!important;
+    font-size: 1.2em!important;
+}
+
+/* Mobile-friendly adjustments */
+@media (max-width: 768px) {
+    .pageBoxLeft,
+    .pageBoxRight {
+        padding: 20px!important; /* Adjust padding for smaller screens */
+        margin-top: 10px!important; /* Reduce top margin */
+    }
+
+    .conditionsBox {
+        flex-direction: column!important; /* Stack elements vertically */
+    }
+    
+    .conditionsHelp {
+        margin: 5px 0!important; /* Adjust margin */
+    }
+
+    .dialogRemove,
+    .dialogCancel {
+        margin-left: 0!important;
+        margin-right: 0!important;
+    }
+}

From e9c3b9563216bf06fd029cec66f6f4662557d23d Mon Sep 17 00:00:00 2001
From: Pieter-Jan De Smijter <pieterjan.desmijter@gmail.com>
Date: Sat, 18 May 2024 17:53:53 +0200
Subject: [PATCH 3/3] submission page mobile

---
 .../components/SubmissionDetailsPage.tsx      | 26 +++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/frontend/app/[locale]/components/SubmissionDetailsPage.tsx b/frontend/app/[locale]/components/SubmissionDetailsPage.tsx
index fa859f1c..8f45ace0 100644
--- a/frontend/app/[locale]/components/SubmissionDetailsPage.tsx
+++ b/frontend/app/[locale]/components/SubmissionDetailsPage.tsx
@@ -12,7 +12,6 @@ import DownloadIcon from "@mui/icons-material/CloudDownload";
 
 const backend_url = process.env['NEXT_PUBLIC_BACKEND_URL'];
 
-
 interface ProjectDetailsPageProps {
     locale: any,
     submission_id: number;
@@ -66,23 +65,23 @@ const ProjectDetailsPage: React.FC<ProjectDetailsPageProps> = ({ locale, submiss
 
     return (
         <ThemeProvider theme={baseTheme}>
-            <Grid container justifyContent="center" alignItems="flex-start" style={{ width: 'fit-content', maxWidth: '100%' }}>
-                <Grid item style={{padding: 20}}>
+            <Grid container justifyContent="center" alignItems="flex-start" style={{ width: '100%', padding: '20px' }}>
+                <Grid item xs={12} style={{paddingBottom: '20px'}}>
                     <ProjectReturnButton locale={locale} project_id={project?.project_id} />
                 </Grid>
-                <Grid item style={{padding: 20, marginRight: "233px"}}>
-                    <Card raised style={{ width: 800 }}>
+                <Grid item xs={12}>
+                    <Card raised style={{ width: '100%' }}>
                         <CardContent>
-                            <Typography variant="h4" style={{ fontWeight: 'bold' }}>
+                            <Typography variant="h4" style={{ fontWeight: 'bold', marginBottom: '20px' }}>
                                 {`${t("submission")} #${submission?.submission_nr}`}
                             </Typography>
-                            <Divider style={{ marginBottom: 64 }}/>
-                            <Grid container spacing={3}>
-                                <Grid item xs={6} style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }}>
-                                    <Typography variant="h6" style={{ fontWeight: 'bold', marginBottom: 2 }}>
+                            <Divider style={{ marginBottom: '20px' }}/>
+                            <Grid container spacing={2}>
+                                <Grid item xs={12} sm={6} style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }}>
+                                    <Typography variant="h6" style={{ fontWeight: 'bold', marginBottom: '10px' }}>
                                         {`${t("evaluation")} status`}
                                     </Typography>
-                                    <div style={{ display: "flex", alignItems: "flex-end", columnGap: "10px" }}>
+                                    <div style={{ display: "flex", alignItems: "center", columnGap: "10px" }}>
                                         {submission?.output_test !== "" ? (
                                             <CheckIcon color="success" style={{ fontSize: 40 }}/>
                                         ) : (
@@ -98,8 +97,8 @@ const ProjectDetailsPage: React.FC<ProjectDetailsPageProps> = ({ locale, submiss
                                         </div>
                                     </div>
                                 </Grid>
-                                <Grid item xs={6} style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end' }}>
-                                    <Typography variant="h6" gutterBottom style={{ fontWeight: 'bold', color: 'primary.main', marginBottom: 2 }}>
+                                <Grid item xs={12} sm={6} style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end' }}>
+                                    <Typography variant="h6" gutterBottom style={{ fontWeight: 'bold', color: 'primary.main', marginBottom: '10px' }}>
                                         {t("uploaded_files")}
                                     </Typography>
                                     <Button
@@ -108,6 +107,7 @@ const ProjectDetailsPage: React.FC<ProjectDetailsPageProps> = ({ locale, submiss
                                         startIcon={<DownloadIcon />}
                                         href={`${backend_url}/submissions/${submission_id}/download`}
                                         download
+                                        size="small" // Adjust button size
                                     >
                                         {t("download_file")}
                                     </Button>