Different attempt at making the popup modal

client/src/components/graphs/CircularProgress/circular-progress.scss

-@use 'styles/settings.scss'as s;
-@use 'styles/functions.scss'as fn;
+
+@use 'styles/settings.scss' as s;
+@use 'styles/functions.scss' as fn;
 
 .circular-progress {
     position: relative;
@@ -60,4 +61,4 @@
         display: flex;
         margin: 0 !important;
     }
-}
\ No newline at end of file
+}

client/src/components/navigation/Tabs/tabs.scss

-@use 'styles/settings.scss'as s;
+
+@use 'styles/settings.scss' as s;
 
 .tabs-container {
     display: flex;
@@ -71,4 +72,4 @@
         box-shadow: 0 0 5px rgba(s.$black, 0.05);
         transition: left 300ms ease;
     }
-}
\ No newline at end of file
+}

client/src/components/ui/Popup/index.tsx

 
-import { ReactNode, useEffect } from 'react';
+import { ReactNode, useEffect, useRef } from 'react';
 import { createPortal } from 'react-dom';
 
 import './popup.scss';
 
-const body = document.getElementsByTagName('body')[0];
-
 interface Props {
     children: ReactNode
     onClose: Function
 }
 
 export default function Popup({ children, onClose }: Props) {
-    useEffect(() => {
-        body.style.overflow = 'hidden';
-        return () => {
-            body.style.overflow = '';
-        }
-    }, []);
+    const body = document.getElementsByTagName('body')[0];
+    const root = useRef<HTMLDivElement>(null);
 
     useEffect(() => {
         const onKeyDown = (e: KeyboardEvent) => {
@@ -31,8 +25,33 @@ export default function Popup({ children, onClose }: Props) {
         }
     }, [onClose]);
 
+    useEffect(() => {
+        const ignoreEvent = (e: Event) => {
+            e.preventDefault();
+            return false;
+        };
+        const elements = [ root.current, body ];
+        const events = [
+            'scroll', 'wheel', 'mousewheel', 'DOMMouseScroll',
+            'keydown', 'keypress', 'keyup', 'touchmove',
+            'touchstart', 'touchend', 'focus', 'click'
+        ];
+        for (const elem of elements) {
+            for (const event of events) {
+                elem?.addEventListener(event, ignoreEvent);
+            }
+        }
+        return () => {
+            for (const elem of elements) {
+                for (const event of events) {
+                    elem?.removeEventListener(event, ignoreEvent);
+                }
+            }
+        }
+    });
+
     return createPortal(
-        <div className="popup-container">
+        <div className="popup-container" ref={root}>
             <div className="popup">
                 {children}
             </div>

client/src/components/ui/Popup/popup.scss

@@ -12,10 +12,10 @@
     justify-content: center;
     z-index: 2000;
     align-items: center;
+
     & ~ div {
         overflow: hidden;
     }
-    
 
     .popup {
         will-change: transform;

client/src/components/ui/Task/task.scss

-@use 'styles/settings.scss'as s;
-@use 'styles/mixins.scss'as mx;
+
+@use 'styles/settings.scss' as s;
+@use 'styles/mixins.scss' as mx;
 
 .task {
     padding: 30px;
@@ -78,4 +79,4 @@
         right: -15px;
         bottom: -20px;
     }
-}
\ No newline at end of file
+}