edit layout for small resolution screens

src/app/hooks/useClickOutside.tsx

@@ -4,14 +4,17 @@ import { useEffect, RefObject } from 'react';
 
 export function useClickOutside(
 	ref: RefObject<HTMLDivElement | null>,
-	callback: () => void
+	callback: () => void,
+	isActive: boolean = true
 ) {
 	useEffect(() => {
+		if (!isActive) return;
+
 		const handleClick = (event: MouseEvent) => {
-			if (!ref) {
+			if (!ref?.current) {
 				return;
 			}
-			if (ref.current && !ref.current.contains(event.target as Node)) {
+			if (!ref.current.contains(event.target as Node)) {
 				callback();
 			}
 		};
@@ -20,5 +23,5 @@ export function useClickOutside(
 		return () => {
 			document.removeEventListener('mousedown', handleClick);
 		};
-	}, [ref, callback]);
+	}, [ref, callback, isActive]);
 }