Merge branch 'raaynoff'

src/components/UI/list/additional/listMenu.tsx

@@ -1,25 +1,22 @@
 import React, { Dispatch, FC } from "react";
 import { useActions } from "../../../../hooks/useActions";
-import { useMenuPositionRef } from "../../../../hooks/useMenuPositionRef";
+import { useMenuPosition } from "../../../../hooks/useMenuPosition";
 import { contentApi } from "../../../../services/contentApi";
 
 interface IListMenuProps {
   isEnabled: boolean;
   setIsEnabled: Dispatch<React.SetStateAction<boolean>>;
   listId: number;
-  menuPosition: {
-    top: number;
-    left: number;
-  };
+  menuPositionParent: React.RefObject<HTMLDivElement>;
 }
 
 const ListMenu: FC<IListMenuProps> = ({
   isEnabled,
   listId,
   setIsEnabled,
-  menuPosition,
+  menuPositionParent,
 }) => {
-  const menuRef = useMenuPositionRef(menuPosition, 110, 15);
+  const menuRef = useMenuPosition(menuPositionParent, 30, 110);
   const [deleteList] = contentApi.useFetchListsDeleteMutation();
   const { listDelete } = useActions();
   const { shareListToggleOn, editListToggleOn } = useActions();

src/components/UI/list/index.tsx

@@ -1,7 +1,6 @@
 import React, { FC, useEffect, useRef, useState } from "react";
 import { useActions } from "../../../hooks/useActions";
 import { useListById } from "../../../hooks/useListById";
-import { useMenuPosition } from "../../../hooks/useMenuPosition";
 import ListMenu from "./additional/listMenu";
 import s from "./list.module.scss";
 
@@ -12,7 +11,6 @@ interface IListProps {
 
 const List: FC<IListProps> = ({ listId, clickCallback }) => {
   const dotRef = useRef<HTMLDivElement>(null);
-  const menuPosition = useMenuPosition(dotRef);
   const [isMenuOpened, SetIsMenuOpened] = useState<boolean>(false);
   const { color, listName } = useListById(listId);
   const { displayList } = useActions();
@@ -54,7 +52,7 @@ const List: FC<IListProps> = ({ listId, clickCallback }) => {
       </div>
 
       <ListMenu
-        menuPosition={menuPosition}
+        menuPositionParent={dotRef}
         isEnabled={isMenuOpened}
         listId={listId}
         setIsEnabled={SetIsMenuOpened}

src/components/common/homeContent/additional/viewTemplate.module.scss

@@ -64,7 +64,4 @@
 }
 .taskSection {
 	margin: 0px 0px 46px 0px;
-	&:last-child {
-		margin-bottom: 0px;
-	}
 }

src/components/modals/taskInfo/additional/textEditor.module.scss

@@ -8,7 +8,7 @@
 		width: 70%;
 	}
 	@media (max-width: 404px) {
-		width: 50%;
+		width: 70%;
 	}
 }
 
@@ -25,7 +25,7 @@
 		width: 70%;
 	}
 	@media (max-width: 404.98px) {
-		width: 40%;
+		width: 70%;
 	}
 }
 
@@ -40,14 +40,15 @@
 		width: 70%;
 	}
 	@media (max-width: 404px) {
-		width: 50%;
+		width: 70%;
 	}
 }
 
 .textarea {
 	width: 80%;
 	min-height: 135px;
+	resize: vertical;
 	@media (max-width: 404px) {
-		width: 50%;
+		max-width: 70%;
 	}
 }

src/components/modals/taskInfo/taskInfo.module.scss

@@ -1,8 +1,9 @@
 .taskInfo {
 	display: flex;
 	flex-direction: column;
+	overflow: hidden;
 
-	height: 620px;
+	max-height: 620px;
 	width: 670px;
 	background-color: #fff;
 	border-radius: 10px;
@@ -23,6 +24,12 @@
 	@media (max-width: 404px) {
 		width: 310px;
 	}
+	@media (max-height: 768.92px) {
+		max-height: 550px;
+	}
+	@media (max-height: 573px) {
+		max-height: 500px;
+	}
 
 	// .taskInfo__content
 	&__content {
@@ -33,22 +40,20 @@
 	&__data {
 		width: 473px;
 		height: 575px;
-		overflow-y: auto;
 		display: flex;
 		flex-direction: column;
 		margin: 0px 0px 25px 25px;
-
-		.wrapper::-webkit-scrollbar-track-piece:start {
-			margin-top: 10px;
-			height: 100px;
-		}
-		&::-webkit-scrollbar:horizontal {
-			height: 100px;
-		}
+		overflow-y: scroll;
 
 		@media (max-width: 681px) {
 			width: 460px;
 		}
+		@media (max-height: 768.92px) {
+			max-height: 550px;
+		}
+		@media (max-height: 573px) {
+			max-height: 500px;
+		}
 	}
 
 	// .taskInfo__nocomments

src/hooks/useMenuPosition.ts

@@ -1,22 +1,21 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef } from "react";
 
 export const useMenuPosition = (
-  elementRef: React.MutableRefObject<HTMLElement | HTMLDivElement | null>
+  elementRef: React.RefObject<HTMLDivElement>,
+  offsetTop: number,
+  offsetLeft: number
 ) => {
-  const [menuPosition, setMenuPosition] = useState({
-    top: 0,
-    left: 0,
-  });
+  const menuRef = useRef<HTMLMenuElement>(null);
 
   useEffect(() => {
-    if (elementRef.current) {
-      const elementNode = elementRef.current;
-      setMenuPosition({
-        top: elementNode.offsetTop,
-        left: elementNode.offsetLeft,
-      });
+    if (elementRef.current && menuRef.current) {
+      const top = elementRef.current.offsetTop;
+      const left = elementRef.current.offsetLeft;
+
+      menuRef.current.style.top = top + offsetTop + "px";
+      menuRef.current.style.left = left + offsetLeft + "px";
     }
-  }, [elementRef]);
+  }, [elementRef.current?.offsetTop, elementRef.current?.offsetLeft]);
 
-  return menuPosition;
+  return menuRef;
 };