From df6d0f07ece462ab196cc27ea9b8da9056e788f6 Mon Sep 17 00:00:00 2001
From: Asim Shrestha <asim.shrestha@hotmail.com>
Date: Fri, 7 Apr 2023 18:44:52 -0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=80=20Fix=20scroll=20bar=20styling?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ChatWindow.tsx |  4 ++--
 src/styles/globals.css        | 28 ++++++++++++++++++++++++++++
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/src/components/ChatWindow.tsx b/src/components/ChatWindow.tsx
index 00a610c..caa1095 100644
--- a/src/components/ChatWindow.tsx
+++ b/src/components/ChatWindow.tsx
@@ -11,12 +11,12 @@ const ChatWindow = ({ children, className }: ChatWindowProps) => {
   return (
     <div
       className={
-        "border-translucent flex h-full w-full flex-col rounded-3xl border-2 border-white/20 bg-zinc-900 text-white shadow-2xl drop-shadow-lg " +
+        "border-translucent flex h-full max-h-full w-full flex-col rounded-3xl border-2 border-white/20 bg-zinc-900 text-white shadow-2xl drop-shadow-lg " +
         className
       }
     >
       <MacWindowHeader />
-      <div className="overflow-y-scroll">{children}</div>
+      <div className="mb-3 mr-3 max-h-[100%] overflow-y-auto">{children}</div>
     </div>
   );
 };
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 315d2db..c48189d 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -6,4 +6,32 @@
     background-image: radial-gradient(circle, rgba(58, 58, 58, 0.75) 2px, transparent 0px);
     background-size: 30px 30px;
     background-position: 0 0, 15px 15px;
+}
+
+/* Customize website's scrollbar like Mac OS
+Not supports in Firefox and IE */
+
+/* total width */
+div::-webkit-scrollbar {
+    border-radius: 16px;
+    background-color: #464649;
+    width: 16px;
+}
+
+/* background of the scrollbar except button or resizer */
+div::-webkit-scrollbar-track {
+    border-radius: 16px;
+    background-color: #464649;
+}
+
+/* scrollbar itself */
+div::-webkit-scrollbar-thumb {
+    background-color: #babac0;
+    border-radius: 16px;
+    border: 2px solid #464649;
+}
+
+/* set button(top and bottom of the scrollbar) */
+div::-webkit-scrollbar-button {
+    display: none;
 }
\ No newline at end of file