Full screen Diferans dialog for mobile add close button

components/teks/diferans.js

@@ -2,11 +2,17 @@ import PropTypes from 'prop-types'
 import {uniqueId} from 'lodash'
 
 import {useRef, useEffect} from 'react'
+import {useTheme} from '@mui/material/styles'
 import Dialog from '@mui/material/Dialog'
 import DialogContent from '@mui/material/DialogContent'
 import DialogTitle from '@mui/material/DialogTitle'
+import useMediaQuery from '@mui/material/useMediaQuery'
+import DialogActions from '@mui/material/DialogActions'
+import Button from '@mui/material/Button'
 
 export default function Diferans({id, ouveDiferans, meteOuveDiferans, difference}) {
+  const theme = useTheme()
+  const fullScreen = useMediaQuery(theme.breakpoints.down('md'))
   const handleClose = () => {
     meteOuveDiferans(null)
   }
@@ -25,6 +31,7 @@ export default function Diferans({id, ouveDiferans, meteOuveDiferans, difference
     <Dialog
       sx={{zIndex: 9999}}
       open={ouveDiferans === id}
+      fullScreen={fullScreen}
       scroll='paper'
       aria-labelledby='légende des différences'
       aria-describedby='différences des modifications'
@@ -56,6 +63,11 @@ export default function Diferans({id, ouveDiferans, meteOuveDiferans, difference
           )
         })}
       </DialogContent>
+      <DialogActions>
+        <Button color='primary' onClick={handleClose}>
+          Fermer
+        </Button>
+      </DialogActions>
       <style jsx>
         {`
           del {