From 67392492285a7549dd3e3cffbb8bd1651ab09aaa Mon Sep 17 00:00:00 2001
From: Koushik <koushikjio1234@gmail.com>
Date: Mon, 4 Mar 2024 10:18:53 +0530
Subject: [PATCH] Unnecessary appearance of scrollbar in room information
 component and component not hiding away when clicked outside the component
 body

---
 .../RoomInformation/RoomInformation.js        | 23 +++++++++++++++----
 .../RoomInformation.module.css                |  4 ++--
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/packages/react/src/components/RoomInformation/RoomInformation.js b/packages/react/src/components/RoomInformation/RoomInformation.js
index 059403dfd..947b257ef 100644
--- a/packages/react/src/components/RoomInformation/RoomInformation.js
+++ b/packages/react/src/components/RoomInformation/RoomInformation.js
@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useContext, useEffect, useRef } from 'react';
 import { css } from '@emotion/react';
 import { Avatar } from '../Avatar/Avatar';
 import RCContext from '../../context/RCInstance';
@@ -10,12 +10,23 @@ import { ActionButton } from '../ActionButton';
 
 const Roominfo = () => {
   const { RCInstance } = useContext(RCContext);
+  const componentRef = useRef(null);
 
   const channelInfo = useChannelStore((state) => state.channelInfo);
+  const setShowChannelinfo = useChannelStore((state) => state.setShowChannelinfo);
 
-  const setShowChannelinfo = useChannelStore(
-    (state) => state.setShowChannelinfo
-  );
+  useEffect(() => {
+    function handleClickOutside(event) {
+      if (componentRef.current && !componentRef.current.contains(event.target)) {
+        setShowChannelinfo(false);
+      }
+    }
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [setShowChannelinfo]);
 
   const toggleshowRoominfo = () => {
     setShowChannelinfo(false);
@@ -25,8 +36,9 @@ const Roominfo = () => {
     const host = RCInstance.getHost();
     return `${host}/avatar/${channelname}`;
   };
+
   return (
-    <Box className={classes.component} style={{ padding: '16px' }}>
+    <Box ref={componentRef} className={classes.component} style={{ padding: '16px' }}>
       <Box
         css={css`
           display: flex;
@@ -84,4 +96,5 @@ const Roominfo = () => {
     </Box>
   );
 };
+
 export default Roominfo;
diff --git a/packages/react/src/components/RoomInformation/RoomInformation.module.css b/packages/react/src/components/RoomInformation/RoomInformation.module.css
index 7e9aa499d..872f66f9f 100644
--- a/packages/react/src/components/RoomInformation/RoomInformation.module.css
+++ b/packages/react/src/components/RoomInformation/RoomInformation.module.css
@@ -4,8 +4,8 @@
   top: 0;
   width: 350px;
   height: 100%;
-  overflow-x: scroll;
-  overflow-y: scroll;
+  overflow-x: auto;
+  overflow-y: auto;
   background-color: white;
   box-shadow: -1px 0px 5px rgb(0 0 0 / 25%);
   z-index: 100;