Update to use size

frontend/package.json

@@ -29,7 +29,6 @@
     "typecheck": "tsc --noEmit"
   },
   "devDependencies": {
-    "@date-io/date-fns": "^3.2.0",
     "@ebay/nice-modal-react": "^1.2.13",
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",

frontend/src/routes/_guest.speedruns.id.$speedrunId.tsx

@@ -4,9 +4,9 @@ import EmojiEventsIcon from '@mui/icons-material/EmojiEvents';
 import GroupAddIcon from '@mui/icons-material/GroupAdd';
 import TimerIcon from '@mui/icons-material/Timer';
 import WallpaperIcon from '@mui/icons-material/Wallpaper';
+import Grid from '@mui/material/Grid2';
 import TableCell from '@mui/material/TableCell';
 import Typography from '@mui/material/Typography';
-import Grid from '@mui/material/Unstable_Grid2';
 import { useQuery } from '@tanstack/react-query';
 import { createFileRoute } from '@tanstack/react-router';
 import {
@@ -60,42 +60,42 @@ function SpeedrunDetail() {
 
             {!isLoading && speedrun && (
                 <Grid container spacing={2}>
-                    <Grid xs={2}>
+                    <Grid size={{ xs: 2 }}>
                         <ContainerWithHeader title={'Rank (Initial)'} iconLeft={<EmojiEventsIcon />}>
                             <Typography textAlign={'center'} fontSize={'large'} fontWeight={'bold'}>
                                 {speedrun.rank} ({speedrun.initial_rank})
                             </Typography>
                         </ContainerWithHeader>
                     </Grid>
-                    <Grid xs={2}>
+                    <Grid size={{ xs: 2 }}>
                         <ContainerWithHeader title={'Time'} iconLeft={<TimerIcon />}>
                             <Typography textAlign={'center'} fontSize={'large'} fontWeight={'bold'}>
                                 {durationString((speedrun.duration ?? 0) / 1000)}
                             </Typography>
                         </ContainerWithHeader>
                     </Grid>
-                    <Grid xs={4}>
+                    <Grid size={{ xs: 4 }}>
                         <ContainerWithHeader title={'Map'} iconLeft={<WallpaperIcon />}>
                             <Typography textAlign={'center'} fontSize={'large'} fontWeight={'bold'}>
                                 {speedrun.map_detail.map_name}
                             </Typography>
                         </ContainerWithHeader>
                     </Grid>
-                    <Grid xs={2}>
+                    <Grid size={{ xs: 2 }}>
                         <ContainerWithHeader title={'Category'} iconLeft={<CategoryIcon />}>
                             <Typography textAlign={'center'} fontSize={'large'} fontWeight={'bold'}>
                                 {speedrun.category}
                             </Typography>
                         </ContainerWithHeader>
                     </Grid>
-                    <Grid xs={2}>
+                    <Grid size={{ xs: 2 }}>
                         <ContainerWithHeader title={'Submitted'} iconLeft={<CategoryIcon />}>
                             <Typography textAlign={'center'} fontSize={'large'} fontWeight={'bold'}>
                                 {renderDateTime(speedrun.created_on)}
                             </Typography>
                         </ContainerWithHeader>
                     </Grid>
-                    <Grid xs={12}>
+                    <Grid size={{ xs: 12 }}>
                         <ContainerWithHeader title={'Players'} iconLeft={<GroupAddIcon />}>
                             <SpeedrunPlayerTable
                                 captures={speedrun.point_captures}
@@ -139,7 +139,6 @@ const SpeedrunPlayerTable = ({
                 );
             }
         }),
-
         columnHelper.accessor('duration', {
             header: 'Time',
             size: 60,

frontend/src/routes/_guest.speedruns.index.tsx

@@ -4,9 +4,9 @@ import EmojiEventsIcon from '@mui/icons-material/EmojiEvents';
 import HistoryIcon from '@mui/icons-material/History';
 import PageviewIcon from '@mui/icons-material/Pageview';
 import ButtonGroup from '@mui/material/ButtonGroup';
+import Grid from '@mui/material/Grid2';
 import TableCell from '@mui/material/TableCell';
 import Typography from '@mui/material/Typography';
-import Grid from '@mui/material/Unstable_Grid2';
 import { useQuery } from '@tanstack/react-query';
 import { createFileRoute } from '@tanstack/react-router';
 import {
@@ -73,7 +73,7 @@ function SpeedrunsOverall() {
         <>
             <Title>Speedrun Overall Results</Title>
             <Grid container spacing={2}>
-                <Grid xs={12} md={4}>
+                <Grid size={{ xs: 12, md: 4 }}>
                     <ContainerWithHeader title={'Speedruns'} iconLeft={<ElectricBoltIcon />}>
                         <Typography>
                             These are the overall results for the speedruns. Speedruns are automatically created upon
@@ -83,7 +83,7 @@ function SpeedrunsOverall() {
                     </ContainerWithHeader>
                 </Grid>
 
-                <Grid md={8} xs={12}>
+                <Grid size={{ md: 8, xs: 12 }}>
                     <ContainerWithHeader title={'Most Recent Changes'} iconLeft={<HistoryIcon />}>
                         <SpeedrunRecentTable
                             speedruns={recent ?? []}
@@ -96,7 +96,7 @@ function SpeedrunsOverall() {
                 {speedruns &&
                     keys.map((map_name) => {
                         return (
-                            <Grid xs={12} md={6} lg={4} key={`map-${map_name}`}>
+                            <Grid size={{ xs: 12, md: 6, lg: 4 }} key={`map-${map_name}`}>
                                 <ContainerWithHeaderAndButtons
                                     title={map_name}
                                     iconLeft={<EmojiEventsIcon />}