Fix Grid sizes

components/akey/kat-akey.js

@@ -14,7 +14,7 @@ export default function KatAkey({tit, kantite, href, as}) {
   const rute = useRouter()
 
   return (
-    <Grid xs={12} md={6}>
+    <Grid size={{xs: 12, md: 6}}>
       <Card sx={{borderColor: theme.palette.primary[theme.palette.mode]}} color='primary' variant='outlined'>
         <CardActionArea onClick={() => rute.push(href, as)}>
           <CardContent>

components/awtis/awtis-detay.js

@@ -58,7 +58,7 @@ export default function AwtisDetay({anAwtis}) {
       </Box>
       <Grid container direction='column' justifyContent='center' alignItems='center' spacing={3}>
         {biyo && (
-          <Grid xs={12} md={6}>
+          <Grid size={{xs: 12, md: 6}}>
             <Card sx={{minWidth: 300}}>
               <CardActionArea onClick={handleClick}>
                 <CardContent>
@@ -73,7 +73,7 @@ export default function AwtisDetay({anAwtis}) {
             </Card>
           </Grid>
         )}
-        <Grid xs={12} md={6}>
+        <Grid size={{xs: 12, md: 6}}>
           <Box marginBottom={3}>
             {paroles.data.length > 1 ? (
               <Accordion>

components/awtis/awtis-kat.js

@@ -58,7 +58,7 @@ export default function AwtisKat({artiste}) {
   const {alias, biographie, paroles, photo, slug} = artiste
 
   return (
-    <Grid xs={12} sm={6} md={4}>
+    <Grid size={{xs: 12, sm: 6, md: 4}}>
       <Kat>
         <Card sx={{maxWidth: 340}}>
           <CardActionArea onClick={() => router.push(`${SITE_URL}/awtis/${slug}`)}>

components/rezo/kat-rezo-nou.js

@@ -20,7 +20,7 @@ export default function KatRezoNou({tit, img, soutit, ko, lyen}) {
 
   return (
     <>
-      <Grid xs={12} md={6} sx={{marginBottom: 2}}>
+      <Grid size={{xs: 12, md: 6}} sx={{marginBottom: 2}}>
         <Card raised>
           <CardActionArea onClick={handleClickOpen}>
             <CardMedia

components/soutyen/payment-method.js

@@ -60,12 +60,12 @@ export default function PaymentMethod({paymentMethod, setPaymentMethod}) {
       </Box>
       <TabPanel value={paymentMethod} index={0}>
         <Grid container rowSpacing={1}>
-          <Grid md={6} xs={12}>
+          <Grid size={{xs: 12, md: 6}}>
             <Button variant='outlined' size='large' endIcon={<Liberapay />} onClick={() => window.open(`https://liberapay.com/${LIBERAPAY_DONATE}/donate`, '_blank')}>
               Faire un don via Liberapay
             </Button>
           </Grid>
-          <Grid md={6} xs={12}>
+          <Grid size={{xs: 12, md: 6}}>
             <Button variant='outlined' size='large' endIcon={<Paypal />} onClick={() => window.open(`https://www.paypal.com/donate/?hosted_button_id=${PAYPAL_ID}`, '_blank')}>
               Faire un don via PayPal
             </Button>

components/stats/kat-stats.js

@@ -8,7 +8,7 @@ import TraductionsStats from './traductions-stats'
 
 export default function KatStats({emoji, value, total}) {
   return (
-    <Grid xs={12} md={2}>
+    <Grid size={{xs: 12, md: 2}}>
       <Card variant='outlined'>
         <CardContent>
           <Typography align='center' variant='h6'>

components/stats/traductions-stats.js

@@ -12,7 +12,7 @@ export default function TraductionsStats({value, total}) {
   return (
     <Box sx={{width: '100%'}}>
       <Grid container rowSpacing={3} columnSpacing={6} justifyContent='space-around'>
-        <Grid xs={12} md={6}>
+        <Grid size={{xs: 12, md: 6}}>
           <Typography style={{fontWeight: 'bold'}} align='center' variant='h6'>
             {translated}
           </Typography>

components/teks/teks-kat.js

@@ -51,7 +51,7 @@ export default function TeksKat({parole}) {
   }
 
   return (
-    <StyledGrid xs={12} sm={6} md={4}>
+    <StyledGrid size={{xs: 12, sm: 6, md: 4}}>
       <Card className={classes.root}>
         <CardActionArea onClick={() => handleClick(slug)}>
           <CardMedia

components/teks/teks.js

@@ -200,7 +200,7 @@ export default function Teks({parole}) {
         )}
       </Box>
       <Grid container justifyContent='center' spacing={1}>
-        <Grid xs={12} md={langArray.length > 0 ? 6 : null}>
+        <Grid size={{xs: 12, md: langArray.length > 0 ? 6 : null}}>
           <Box className={classes.gridText}>
             <Typography align='center' sx={{marginBottom: '0.5em'}} variant='h4'>
               Transcription
@@ -211,7 +211,7 @@ export default function Teks({parole}) {
           </Box>
         </Grid>
         {langArray.map(({title, flag, lang}) => (
-          <Grid key={title} xs={12} md={6}>
+          <Grid key={title} size={{xs: 12, md: 6}}>
             <Box className={classes.gridText}>
               <Typography align='center' sx={{marginBottom: '0.5em'}} variant='h4'>
                 {flag === 'fr' && (