Add tailwind-scrollbar package and update ChatBody component

H1B0B0 · Feb 17, 2024 · 1df9e84 · 1df9e84
1 parent 71e98b5
commit 1df9e84
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 3 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git 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
@@ -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
@@ -38,5 +38,5 @@ module.exports = {
       },
     },
   },
-  plugins: [],
+  plugins: [require("tailwind-scrollbar")],
 };
-Original file line number
+Diff line change
@@ Expand Up / @@ -38,5 +38,5 @@ module.exports = { @@
           },
         },
       },
-      plugins: [],
+      plugins: [require("tailwind-scrollbar")],
     };