From 1df9e84c0c04897a2746c394bd4842f61205b4b5 Mon Sep 17 00:00:00 2001
From: etienne <etienne.mentrel@scafe.io>
Date: Sat, 17 Feb 2024 16:59:16 +0100
Subject: [PATCH] Add tailwind-scrollbar package and update ChatBody component

---
 frontend/package-lock.json                | 19 +++++++++++++++++++
 frontend/package.json                     |  1 +
 frontend/src/components/Chat/ChatBody.tsx |  5 +++--
 frontend/tailwind.config.js               |  2 +-
 4 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index e2e73bd..d94e0ad 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -48,6 +48,7 @@
         "@types/uuid": "^9.0.1",
         "bufferutil": "^4.0.7",
         "supports-color": "^8.1.1",
+        "tailwind-scrollbar": "^3.1.0",
         "utf-8-validate": "^5.0.10"
       }
     },
@@ -4582,6 +4583,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/tailwind-scrollbar": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/tailwind-scrollbar/-/tailwind-scrollbar-3.1.0.tgz",
+      "integrity": "sha512-pmrtDIZeHyu2idTejfV59SbaJyvp1VRjYxAjZBH0jnyrPRo6HL1kD5Glz8VPagasqr6oAx6M05+Tuw429Z8jxg==",
+      "dev": true,
+      "engines": {
+        "node": ">=12.13.0"
+      },
+      "peerDependencies": {
+        "tailwindcss": "3.x"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "3.3.2",
       "license": "MIT",
@@ -7987,6 +8000,12 @@
     "supports-preserve-symlinks-flag": {
       "version": "1.0.0"
     },
+    "tailwind-scrollbar": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/tailwind-scrollbar/-/tailwind-scrollbar-3.1.0.tgz",
+      "integrity": "sha512-pmrtDIZeHyu2idTejfV59SbaJyvp1VRjYxAjZBH0jnyrPRo6HL1kD5Glz8VPagasqr6oAx6M05+Tuw429Z8jxg==",
+      "dev": true
+    },
     "tailwindcss": {
       "version": "3.3.2",
       "requires": {
diff --git a/frontend/package.json b/frontend/package.json
index 4ba2a1c..a26cb54 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -49,6 +49,7 @@
     "@types/uuid": "^9.0.1",
     "bufferutil": "^4.0.7",
     "supports-color": "^8.1.1",
+    "tailwind-scrollbar": "^3.1.0",
     "utf-8-validate": "^5.0.10"
   }
 }
diff --git a/frontend/src/components/Chat/ChatBody.tsx b/frontend/src/components/Chat/ChatBody.tsx
index 70d3232..3d73fa3 100644
--- a/frontend/src/components/Chat/ChatBody.tsx
+++ b/frontend/src/components/Chat/ChatBody.tsx
@@ -85,11 +85,12 @@ function ChatBody({ roomId }: { roomId: string }) {
       style={{
         flexGrow: 1,
         overflowY: "auto",
-        overflowX: "auto",
+        overflowX: "hidden",
         height: "calc(100vh - 60px)",
       }}
+      className="scrollbar-thin scrollbar-thumb-gray-500 scrollbar-track-transparent"
     >
-      <div className="basis_[85%] overflow-y-scroll p-5 w-full flex flex-col gap-2 custom-scrollbar rounded-lg">
+      <div className="basis_[85%] p-5 w-full flex flex-col gap-2 rounded-lg">
         {messages[roomId]?.map((message: any, index: number) => (
           <Message
             message={message}
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 5d36ebb..42ff183 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -38,5 +38,5 @@ module.exports = {
       },
     },
   },
-  plugins: [],
+  plugins: [require("tailwind-scrollbar")],
 };