Fix CGUDialog display

components/cgu/cgu-dialog.js

@@ -1,8 +1,9 @@
 import {useRef, useEffect} from 'react'
-import {styled} from '@mui/material/styles'
+import {styled, useTheme} from '@mui/material/styles'
 import PropTypes from 'prop-types'
 import {Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography} from '@mui/material'
 import {useRouter} from 'next/navigation'
+import useMediaQuery from '@mui/material/useMediaQuery'
 import Cgu from '.'
 
 const PREFIX = 'cgu-dialog'
@@ -13,13 +14,15 @@ const classes = {
 
 const Root = styled('div')(() => ({
   [`& .${classes.dialog}`]: {
-    zIndex: 9999
+    zIndex: 1
   }
 }))
 
 const CGU_DOWNLOAD_LINK = process.env.NEXT_PUBLIC_CGU_DOWNLOAD_LINK
 
 export default function CGUDialog({open, setOpen}) {
+  const theme = useTheme()
+  const fullScreen = useMediaQuery(theme.breakpoints.down('md'))
   const router = useRouter()
 
   const handleClose = () => {
@@ -44,6 +47,7 @@ export default function CGUDialog({open, setOpen}) {
   return (
     <Root>
       <Dialog
+        fullScreen={fullScreen}
         open={open}
         scroll='paper'
         aria-labelledby='scroll-dialog-title'
@@ -51,7 +55,7 @@ export default function CGUDialog({open, setOpen}) {
         className={classes.dialog}
         onClose={handleClose}
       >
-        <DialogTitle id='scroll-dialog-title'>CGU et politique de confidentialité</DialogTitle>
+        <DialogTitle className={classes.dialog} id='scroll-dialog-title'>CGU et politique de confidentialité</DialogTitle>
         <DialogContent dividers>
           <Typography
             ref={descriptionElementRef}