feat(chat): dynamically resize text boxes and remove extra scroll bar

apps/web/src/components/Chats/Chats.css

@@ -129,25 +129,51 @@
 }*/
 
 /* CHAT */
+
+.message-container {
+  max-height: 80%;
+  overflow-y: auto; /* -rm any extra y scrolling */
+  overflow-x: hidden; /* //  //   //   x    //    */
+
+  word-wrap: break-word;
+}
+
 .message-container {
+
   font: 14px;
   font-family: sans-serif;
-  padding: 0 10px;
-  margin-top: 20px;
   font-weight: 400;
   line-height: normal;
   width: auto;
+
+  overflow: hidden; 
+}
+
+
+.app-message{
+  width: 100%;
+  display: flex;       
+  justify-content: center; 
+  align-items: center;
 }
 
+
 .you,
 .other {
-  margin-top: 20px;
-  padding: 3px 9px;
-  max-width: 50%;
+  margin-bottom: .6rem;
+  padding: 8px 12px;
+  max-width: 70%; /*50% -> 80%*/
   clear: both;
   position: relative;
+
+
+  display: inline-block; /* to ensure that the content controls the width */
+  word-wrap: break-word;
+
 }
 
+
+
 .other {
   float: left;
   margin-right: auto;
@@ -167,18 +193,71 @@
 
 .you {
   float: right;
-  margin-left: 100%;
-  text-align: right;
+  margin-left: 0;
+  text-align: left;
   border-radius: 12px 12px 0px 12px;
   background-color: #0b93f6;
   color: white;
 }
 
 .you:before {
   border-bottom: 9px solid #0b93f6;
-  /* border-right: 9px solid rgba(0, 0, 0, 0); */
+  border-right: 9px solid rgba(0, 0, 0, 0);
   position: absolute;
   bottom: 0;
   right: -8px;
   content: "";
 }
+
+.chat-body {
+  max-height: 100%;
+  overflow-y: hidden;
+  overflow-x: hidden;
+}
+
+
+
+
+.no-scrollbar::-webkit-scrollbar {
+  display: none; /* für WebKit */
+}
+
+.no-scrollbar {
+  -ms-overflow-style: none; /* // Internet Explorer nd Edge */
+  scrollbar-width: none; /* für Firefox */
+}
+
+
+
+
+
+
+
+
+.custom-scrollbar::-webkit-scrollbar {
+  width: 4px; 
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: transparent; 
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background-color: white; 
+  border-radius: 10px; 
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+  background-color: #cccccc; 
+}
+
+/* f/ Firefox */
+.custom-scrollbar {
+  scrollbar-width: thin; /* Deixa a scrollbar fina */
+  scrollbar-color: white transparent; 
+}
+
+.scrollToBottom{
+  padding: 1rem;
+
+}

apps/web/src/components/Chats/Chats.jsx

@@ -7,7 +7,16 @@ import { motion } from "framer-motion";
 import "./Chats.css";
 import NotificationMessage from "../../pages/Assets/Notification/Notification-Message.mp3";
 
+import preventHorizontalScroll from "../../preventHorizontalScroll";
+
+
+
 const Chat = ({ socket, roomId, userName, setShowChat, isVisible }) => {
+
+  useEffect(() => {
+    preventHorizontalScroll(); 
+  }, []);
+
   const [currentMessage, setCurrentMessage] = useState("");
   const [messageList, setMessageList] = useState([]);
   console.log(messageList);
@@ -50,11 +59,11 @@ const Chat = ({ socket, roomId, userName, setShowChat, isVisible }) => {
   return (
     <motion.div className={`${isVisible ? "visible" : "hidden"}`}>
       <div
-        className="flex flex-col absolute z-50 right-[2%] top-[5%] w-[24%] h-[84%] max-w-sm flex-shrink-0
-       rounded-2xl bg-White shadow-xl shadow-black"
+        className="flex flex-col absolute z-50 right-[2%] top-[5%] w-auto min-w-[27%] max-w-[27%] h-[84%] flex-shrink-0
+       rounded-2xl bg-White shadow-xl shadow-black "
       >
         {" "}
-        <div className="p-6 pr-3 pb-1 pl-5 flex w-full">
+        <div className="p-6 pr-3 pb-1 pl-5 flex ">
           <span className="font-Roboto text-base font-medium leading-normal ml-1">
             In-room messages
           </span>
@@ -64,7 +73,7 @@ const Chat = ({ socket, roomId, userName, setShowChat, isVisible }) => {
           />
         </div>
         <div className="flex w-full py-4 px-4 justify-between items-center">
-          <div className="flex flex-col w-full h-16 justify-center items-center rounded bg-ChatBg">
+          <div className="flex flex-col w-full h-10 justify-center items-center rounded bg-ChatBg">
             <span
               className="flex items-center text-ChatText font-Roboto text-sm xl:text-sm 
             font-normal"
@@ -73,27 +82,32 @@ const Chat = ({ socket, roomId, userName, setShowChat, isVisible }) => {
             </span>
           </div>
         </div>
-        <div className="chat-body flex-1 overflow-auto relative">
+        <div className=" chat-body no-scrollbar flex overflow-hidden relative p-1">
           <ScrollToBottom
-            className=" w-full h-full text-sm font-Roboto px-1 mt-6 
-          font-normal"
+            className=" scrollToBottom  h-full no-scrollbar custom-scrollbar text-sm font-Roboto mt-6  
+          font-normal "
           >
-            <div
-              className="flex px-1 py-2 items-start gap-10 rounded-4 bg-ChatBg w-64 
-            xl:w-72 ml-[10%] mr-1 mb-0.5 justify-center"
+
+          {/* Div especial */}
+          <div className="app-message">
+          <div
+              className=" flex px-1 py-2 gap-5 rounded-4  
+            xl:w-52 mb-0.5 justify-center w-[full] bg-ChatText"
             >
               <span
-                className="text-center text-ChatText font-Roboto text-xs xl:text-xs
-              font-Normal w-[75%]"
+                className="text-center text-ChatText  bg-ChatBg font-Roboto text-xs xl:text-xs
+              font-Normal w-[75%] p-1"
               >
                 Messages can only be seen by people in the call and are deleted
                 when the call ends.
               </span>
             </div>
+          </div>
+
             {messageList.map((messageContent) => {
               return (
                 <div
-                  className={`message ${
+                  className={` message ${
                     userName === messageContent.author ? "you" : "other"
                   }`}
                 >

apps/web/src/preventHorizontalScroll.js

@@ -0,0 +1,13 @@
+const preventHorizontalScroll = () => {
+    // Prevent horizontal scrolling when loading and resizing the window
+    window.addEventListener("resize", () => {
+      document.documentElement.style.overflowX = "hidden";
+    });
+
+    window.addEventListener("load", () => {
+      document.documentElement.style.overflowX = "hidden";
+    });
+  };
+
+  export default preventHorizontalScroll;
+