From d1da8e4216dee8f126003651c84f72578c71ded8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20Famibelle-Pronzola?= <c.pronzola@tuta.io>
Date: Sat, 22 Jul 2023 23:54:05 +0400
Subject: [PATCH] Full screen Diferans dialog for mobile add close button

---
 components/teks/diferans.js | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/components/teks/diferans.js b/components/teks/diferans.js
index 4e74a67..e205313 100644
--- a/components/teks/diferans.js
+++ b/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 {