From fef72ccc705f0c16693cc25d4c69a2d70d1c7193 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Mon, 6 Mar 2023 11:13:08 +0530
Subject: [PATCH] style: kanban horizontal scrollbar added (#372)

---
 .../app/components/core/board-view/all-boards.tsx |  2 +-
 apps/app/styles/globals.css                       | 15 +++++++++++++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/apps/app/components/core/board-view/all-boards.tsx b/apps/app/components/core/board-view/all-boards.tsx
index 2c3c46462..f8ab8ff7f 100644
--- a/apps/app/components/core/board-view/all-boards.tsx
+++ b/apps/app/components/core/board-view/all-boards.tsx
@@ -40,7 +40,7 @@ export const AllBoards: React.FC<Props> = ({
     <>
       {groupedByIssues ? (
         <div className="h-[calc(100vh-157px)] w-full lg:h-[calc(100vh-115px)]">
-          <div className="flex h-full gap-x-9 overflow-x-auto overflow-y-hidden">
+          <div className="flex h-full gap-x-9 overflow-x-auto horizontal-scroll-enable overflow-y-hidden">
             {Object.keys(groupedByIssues).map((singleGroup, index) => {
               const currentState =
                 selectedGroup === "state_detail.name"
diff --git a/apps/app/styles/globals.css b/apps/app/styles/globals.css
index abc50d9dc..e6490a822 100644
--- a/apps/app/styles/globals.css
+++ b/apps/app/styles/globals.css
@@ -30,6 +30,21 @@
   -webkit-font-smoothing: antialiased;
 }
 
+/* Horizontal Scrollbar style */
+.horizontal-scroll-enable{
+  overflow-x: scroll;
+}
+
+.horizontal-scroll-enable::-webkit-scrollbar{
+  display: block;
+  height: 10px;
+}
+
+.horizontal-scroll-enable::-webkit-scrollbar-thumb{
+  border-radius: 5px;
+  background-color: #9ca3af;
+}
+/* end Horizontal Scrollbar style */
 .scrollbar-enable::-webkit-scrollbar {
   display: block;
 }