From 48ec0ae44cf982362afdd408a2ecf5d971d6f872 Mon Sep 17 00:00:00 2001
From: penw0lf <zun3dali@gmail.com>
Date: Fri, 11 Oct 2024 21:42:49 +0530
Subject: [PATCH 1/2] Solved / #1294

---
 frontend/src/Navigation.tsx                    |  5 ++++-
 frontend/src/conversation/ConversationTile.tsx | 11 ++++++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/frontend/src/Navigation.tsx b/frontend/src/Navigation.tsx
index 052a9643..0cdff05f 100644
--- a/frontend/src/Navigation.tsx
+++ b/frontend/src/Navigation.tsx
@@ -275,7 +275,10 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
             {t('newChat')}
           </p>
         </NavLink>
-        <div className="mb-auto h-[78vh] overflow-y-auto overflow-x-hidden dark:text-white">
+        <div
+          id="conversationsMainDiv"
+          className="mb-auto h-[78vh] overflow-y-auto overflow-x-hidden dark:text-white"
+        >
           {conversations && conversations.length > 0 ? (
             <div>
               <div className=" my-auto mx-4 mt-2 flex h-6 items-center justify-between gap-4 rounded-3xl">
diff --git a/frontend/src/conversation/ConversationTile.tsx b/frontend/src/conversation/ConversationTile.tsx
index 0193d161..0651447f 100644
--- a/frontend/src/conversation/ConversationTile.tsx
+++ b/frontend/src/conversation/ConversationTile.tsx
@@ -75,6 +75,15 @@ export default function ConversationTile({
       document.removeEventListener('mousedown', handleClickOutside);
     };
   }, []);
+
+  useEffect(() => {
+    const conversationsMainDiv = document.getElementById(
+      'conversationsMainDiv',
+    );
+    conversationsMainDiv &&
+      (conversationsMainDiv.style.overflowY = isOpen ? 'hidden' : 'auto');
+  }, [isOpen]);
+
   function onClear() {
     setConversationsName(conversation.name);
     setIsEdit(false);
@@ -147,7 +156,7 @@ export default function ConversationTile({
               <button
                 onClick={(event: SyntheticEvent) => {
                   event.stopPropagation();
-                  setOpen(true);
+                  setOpen(!isOpen);
                 }}
                 className="mr-2 flex w-4 justify-center"
               >

From f8544cf14bcd90e2a097d1e2f26dc265938b95e4 Mon Sep 17 00:00:00 2001
From: ayaan-qadri <develop.ayaan@gmail.com>
Date: Sun, 13 Oct 2024 10:42:35 +0530
Subject: [PATCH 2/2] Added Scrollbar visible when popup is opened

---
 .../src/conversation/ConversationTile.tsx     | 33 +++++++++++++++++--
 1 file changed, 30 insertions(+), 3 deletions(-)

diff --git a/frontend/src/conversation/ConversationTile.tsx b/frontend/src/conversation/ConversationTile.tsx
index 0651447f..dd3e6e1d 100644
--- a/frontend/src/conversation/ConversationTile.tsx
+++ b/frontend/src/conversation/ConversationTile.tsx
@@ -1,4 +1,10 @@
-import { SyntheticEvent, useEffect, useRef, useState } from 'react';
+import {
+  SyntheticEvent,
+  useEffect,
+  useRef,
+  useState,
+  useCallback,
+} from 'react';
 import { useSelector } from 'react-redux';
 import Edit from '../assets/edit.svg';
 import Exit from '../assets/exit.svg';
@@ -76,12 +82,33 @@ export default function ConversationTile({
     };
   }, []);
 
+  const preventScroll = useCallback((event: WheelEvent | TouchEvent) => {
+    event.preventDefault();
+  }, []);
+
   useEffect(() => {
     const conversationsMainDiv = document.getElementById(
       'conversationsMainDiv',
     );
-    conversationsMainDiv &&
-      (conversationsMainDiv.style.overflowY = isOpen ? 'hidden' : 'auto');
+
+    if (conversationsMainDiv) {
+      if (isOpen) {
+        conversationsMainDiv.addEventListener('wheel', preventScroll, {
+          passive: false,
+        });
+        conversationsMainDiv.addEventListener('touchmove', preventScroll, {
+          passive: false,
+        });
+      } else {
+        conversationsMainDiv.removeEventListener('wheel', preventScroll);
+        conversationsMainDiv.removeEventListener('touchmove', preventScroll);
+      }
+
+      return () => {
+        conversationsMainDiv.removeEventListener('wheel', preventScroll);
+        conversationsMainDiv.removeEventListener('touchmove', preventScroll);
+      };
+    }
   }, [isOpen]);
 
   function onClear() {