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

apps/web/package.json

@@ -57,7 +57,7 @@
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "postcss-nesting": "^12.0.2",
     "sass": "^1.69.5",
-    "tailwindcss": "^3.4.1",
+    "tailwindcss": "^3.4.13",
     "webpack-cli": "^5.1.4"
   }
 }

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

@@ -129,25 +129,52 @@
 }*/
 
 /* 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;
+
+  position: relative;
 }
 
+
+
 .other {
   float: left;
   margin-right: auto;
@@ -167,18 +194,76 @@
 
 .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 {
+  height: 80%;
+  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,48 +73,54 @@ 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 
+              className="flex items-center font-Roboto text-sm xl:text-sm 
             font-normal"
             >
               Main Meet Messages
             </span>
           </div>
         </div>
-        <div className="chat-body flex-1 overflow-auto relative">
-          <ScrollToBottom
-            className=" w-full h-full text-sm font-Roboto px-1 mt-6 
-          font-normal"
-          >
+        <div className=" w-full chat-body no-scrollbar flex overflow-hidden relative ">
+          <ScrollToBottom className=" scrollToBottom w-full h-full no-scrollbar custom-scrollbar text-sm font-Roboto mt-6 font-normal ">
+
+            {/* Div especial */}
+            <div className="app-message ">
             <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"
-            >
-              <span
-                className="text-center text-ChatText font-Roboto text-xs xl:text-xs
-              font-Normal w-[75%]"
+                className=" flex px-1 py-2 gap-5 rounded-4  
+              xl:w-52 mb-0.5 justify-center w-[full] "
               >
-                Messages can only be seen by people in the call and are deleted
-                when the call ends.
-              </span>
-            </div>
-            {messageList.map((messageContent) => {
-              return (
-                <div
-                  className={`message ${
-                    userName === messageContent.author ? "you" : "other"
-                  }`}
+                <span
+                  className="text-center text-ChatText font-Roboto text-xs xl:text-xs
+              font-Normal w-[75%]"
                 >
-                  <div>
-                    <div className="message-content">
-                      <p>{messageContent.message}</p>
+                  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="flex justify-end">
+                    <div
+                      className={` message ${
+                        userName === messageContent.author ? "you" : "other"
+                      }`}
+                    >
+                      <div>
+                        <div className="message-content">
+                          <p>{messageContent.message}</p>
+                        </div>
+                      </div>
                     </div>
+
+
+                    <div ref={messagesEndRef} />
                   </div>
-                </div>
-              );
-            })}
-            <div ref={messagesEndRef} />
+                );
+              })}
           </ScrollToBottom>
         </div>
         <div

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;
+