#66 Реализовал логику модалки, чтобы она не выходила за границы

planner-front/src/components/MonthCalendarBody/CalendarTask/CalendarTask.js

@@ -63,9 +63,9 @@ const CalendarTask = ({setCurrentTask, handleOpen, task, line, setCurrentLine, i
             </div>
         </div>
         <div>
-          <span>
+          
           {task.title}
-         </span>
+         
         </div>
       </>
       
@@ -76,9 +76,9 @@ const CalendarTask = ({setCurrentTask, handleOpen, task, line, setCurrentLine, i
             <ArrowBackIcon sx={arrowClass} onClick={(e)=>{e.stopPropagation(); increaseTaskHandler(line, task, true)}}/>
             <ArrowForwardIcon sx={arrowClass} onClick={(e)=>{e.stopPropagation(); reduceTaskHandler(line, task, true)}}/>
             </div>
-              <span>
+              
                 {task.title}
-              </span>
+              
             <div style={{display: 'flex', alignItems: 'center'}}>
             <Button sx={{color:'black', fontWeight:'600'}} onClick={(e)=>{e.stopPropagation(); setCopyTask(task)}}>
                 Copy

planner-front/src/components/MonthCalendarBody/MonthCalendarBody.js

@@ -13,10 +13,11 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, current
   const [currentLine, setCurrentLine] = useState('')
   const [modal, setModal] = useState({open:false, y: 0, x: 0,});
   const handleOpen = (e) => {
+    console.log(e)
     setModal( {
       open: true, 
-      yPage: e.clientY, 
-      xPage: e.clientX, 
+      yClickСordinates: e.clientY, 
+      xClickСordinates: e.clientX, 
       yDivClick: e.nativeEvent.offsetY,
       xDivClick: e.nativeEvent.offsetX,
       yDiv: e.target.offsetHeight,

planner-front/src/components/UI/ModalTask/ModalTask.js

 import Box from '@mui/material/Box';
 import Modal from '@mui/material/Modal';
+import { useEffect, useState } from 'react';
 
 
 export default function ModalTask({modal, handleClose, children}) {
 
+  const [windowDimenion, detectHW] = useState({
+    winWidth: window.innerWidth,
+    winHeight: window.innerHeight,
+  })
+
+  const detectSize = () => {
+    detectHW({
+      winWidth: window.innerWidth,
+      winHeight: window.innerHeight,
+    })
+  }
+
+  useEffect(() => {
+    window.addEventListener('resize', detectSize)
+
+    return () => {
+      window.removeEventListener('resize', detectSize)
+    }
+  }, [windowDimenion])
+
+  const getYCordinatesToModal = () => {
+    if (windowDimenion.winHeight > modal.yClickСordinates + 350) {
+      return modal.yClickСordinates - modal.yDiv - modal.yDivClick 
+    } else {
+      return modal.yClickСordinates - modal.yDiv - modal.yDivClick - ((modal.yClickСordinates + 350) - windowDimenion.winHeight) - 10
+    }
+  }
+  const getXCordinatesToModal = () => {
+    if (windowDimenion.winWidth > modal.xClickСordinates + modal.xDiv + 250 + modal.xDivClick) {
+      return modal.xClickСordinates + modal.xDiv - modal.xDivClick + 10
+    } else {
+      return modal.xClickСordinates - modal.xDiv - ((modal.xClickСordinates + 250) - windowDimenion.winWidth) - 120
+    }
+  }
   const style = {
     position: 'absolute',
-    top: modal.yPage - modal.yDiv - modal.yDivClick,
-    left: modal.xPage + modal.xDiv - modal.xDivClick + 10,
+    top: getYCordinatesToModal(),
+    left: getXCordinatesToModal(),
     width: 250,
     height: 350,
     bgcolor: 'background.paper',