From ad6b450497fcbfd0664c6796bcad668f677248b8 Mon Sep 17 00:00:00 2001
From: Andrew <155891765+sruenwg@users.noreply.github.com>
Date: Thu, 6 Feb 2025 13:43:06 -0800
Subject: [PATCH] refactor(web): migrate to MUI Grid v2 (#679)

---
 .../web/src/components/Templates/ClipList.tsx          |  6 +++---
 .../web/src/components/Templates/Livestreams.tsx       | 10 +++-------
 service/vspo-schedule/web/src/pages/freechat.tsx       |  6 +++---
 3 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/service/vspo-schedule/web/src/components/Templates/ClipList.tsx b/service/vspo-schedule/web/src/components/Templates/ClipList.tsx
index c33581d9..b7f20779 100644
--- a/service/vspo-schedule/web/src/components/Templates/ClipList.tsx
+++ b/service/vspo-schedule/web/src/components/Templates/ClipList.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Grid, Box, Pagination } from "@mui/material";
+import { Box, Grid2 as Grid, Pagination } from "@mui/material";
 import { Clip } from "@/types/streaming";
 import { ClipCard } from "../Elements";
 
@@ -22,9 +22,9 @@ export const ClipList: React.FC<Props> = ({ clips }) => {
 
   return (
     <>
-      <Grid container spacing={3}>
+      <Grid container spacing={3} sx={{ width: "100%" }}>
         {paginatedClips.map((clip) => (
-          <Grid item xs={12} sm={6} md={4} key={clip.id}>
+          <Grid size={{ xs: 12, sm: 6, md: 4 }} key={clip.id}>
             <ClipCard clip={clip} />
           </Grid>
         ))}
diff --git a/service/vspo-schedule/web/src/components/Templates/Livestreams.tsx b/service/vspo-schedule/web/src/components/Templates/Livestreams.tsx
index 7f0e7ee1..2faffb11 100644
--- a/service/vspo-schedule/web/src/components/Templates/Livestreams.tsx
+++ b/service/vspo-schedule/web/src/components/Templates/Livestreams.tsx
@@ -5,7 +5,7 @@ import {
   AccordionSummary,
   Avatar,
   Box,
-  Grid,
+  Grid2 as Grid,
   Typography,
 } from "@mui/material";
 import { styled } from "@mui/material/styles";
@@ -223,14 +223,10 @@ export const LivestreamCards: React.FC<Props> = ({
                     }}
                   >
                     <TimeRangeLabel variant="h6">{label}</TimeRangeLabel>
-                    <Grid container spacing={2}>
+                    <Grid container spacing={2} sx={{ width: "100%" }}>
                       {livestreams.map((livestream) => (
                         <Grid
-                          item
-                          xs={6}
-                          sm={6}
-                          md={3}
-                          lg={3}
+                          size={{ xs: 6, sm: 6, md: 3, lg: 3 }}
                           key={livestream.id}
                         >
                           <LivestreamCard
diff --git a/service/vspo-schedule/web/src/pages/freechat.tsx b/service/vspo-schedule/web/src/pages/freechat.tsx
index bef762ec..bc16d608 100644
--- a/service/vspo-schedule/web/src/pages/freechat.tsx
+++ b/service/vspo-schedule/web/src/pages/freechat.tsx
@@ -5,7 +5,7 @@ import { GetStaticProps } from "next";
 import React from "react";
 import { NextPageWithLayout } from "./_app";
 import { Livestream } from "@/types/streaming";
-import { Grid } from "@mui/material";
+import Grid from "@mui/material/Grid2";
 import { members } from "@/data/members";
 import { fetchFreechats } from "@/lib/api";
 import { DEFAULT_LOCALE } from "@/lib/Const";
@@ -23,9 +23,9 @@ type FreechatsProps = {
 
 const FreechatPage: NextPageWithLayout<FreechatsProps> = ({ freechats }) => {
   return (
-    <Grid container spacing={3}>
+    <Grid container spacing={3} sx={{ width: "100%" }}>
       {freechats.map((freechat) => (
-        <Grid item xs={6} md={3} key={freechat.id}>
+        <Grid size={{ xs: 6, md: 3 }} key={freechat.id}>
           <LivestreamCard livestream={freechat} isFreechat={true} />
         </Grid>
       ))}