From 99b73fb1c17d3d8bcf315228465cfea0575517e7 Mon Sep 17 00:00:00 2001
From: Nathaniel Tampus <contact@nize.ph>
Date: Mon, 6 Mar 2023 18:19:47 +0800
Subject: [PATCH] scrollbar styling

---
 client/src/components/game/GamePage.tsx |  4 ++--
 client/src/styles/globals.css           | 14 ++++++++++++++
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/client/src/components/game/GamePage.tsx b/client/src/components/game/GamePage.tsx
index 7b1831f..734de20 100644
--- a/client/src/components/game/GamePage.tsx
+++ b/client/src/components/game/GamePage.tsx
@@ -418,7 +418,7 @@ export default function GamePage({ initialLobby }: { initialLobby: Game }) {
               </div>
             </div>
             <div className="h-36 w-full overflow-y-scroll">
-              <table className="table-compact table w-full ">
+              <table className="table-compact table w-full">
                 <tbody>
                   {(lobby.actualGame.pgn() || "")
                     .split(/\d+\./)
@@ -442,7 +442,7 @@ export default function GamePage({ initialLobby }: { initialLobby: Game }) {
         <div className="h-60 w-full min-w-fit">
           <div className="bg-base-300 flex h-full w-full min-w-[64px] flex-col rounded-lg p-4 shadow-sm">
             <ul
-              className="mb-4 flex flex-col gap-1 overflow-y-scroll break-words"
+              className="mb-4 flex h-full flex-col gap-1 overflow-y-scroll break-words"
               ref={chatlistRef}
             >
               {chatMessages.map((m, i) => (
diff --git a/client/src/styles/globals.css b/client/src/styles/globals.css
index b5c61c9..995bb75 100644
--- a/client/src/styles/globals.css
+++ b/client/src/styles/globals.css
@@ -1,3 +1,17 @@
 @tailwind base;
+
+* {
+  scrollbar-width: thin;
+}
+
+*::-webkit-scrollbar {
+  width: 4px;
+}
+
+*::-webkit-scrollbar-thumb {
+  @apply bg-slate-500;
+  border-radius: 2px;
+}
+
 @tailwind components;
 @tailwind utilities;