From fa97b35b84751cc905afbc83775187aef7023fea Mon Sep 17 00:00:00 2001
From: reigj1 <rei.gjyli@dfinity.org>
Date: Thu, 17 Oct 2024 12:49:16 +0200
Subject: [PATCH] fix roadmap scrollbar

---
 src/css/custom.scss   | 11 +++++++++++
 src/pages/roadmap.tsx |  2 +-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/css/custom.scss b/src/css/custom.scss
index 092819c340..8967e45ca8 100644
--- a/src/css/custom.scss
+++ b/src/css/custom.scss
@@ -555,6 +555,17 @@ div[class^="announcementBarContent"] {
   }
 }
 
+.hide-scrollbar {
+  /*FireFox*/
+  scrollbar-width: none;
+  /*IE10+*/
+  -ms-overflow-style: -ms-autohiding-scrollbar;
+}
+.hide-scrollbar::-webkit-scrollbar {
+  /*Chrome, Safari, Edge*/
+  display: none;
+}
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
diff --git a/src/pages/roadmap.tsx b/src/pages/roadmap.tsx
index 99f495bdb8..e1bf97b86a 100644
--- a/src/pages/roadmap.tsx
+++ b/src/pages/roadmap.tsx
@@ -444,7 +444,7 @@ const RoadmapPage: React.FC = () => {
                   ref={scrollRefs[indexTheme]}
                   data-scroll={indexTheme}
                   aria-label="milestones"
-                  className="flex gap-2 md:gap-6 items-stretch overflow-x-auto snap-mandatory snap-x pt-10 pb-20 -mb-2 w-full scrollbar-hide box-border pl-[var(--offcut)] pr-[var(--offcut)]"
+                  className="flex gap-2 md:gap-6 items-stretch overflow-x-auto snap-mandatory snap-x pt-10 pb-20 -mb-2 w-full hide-scrollbar box-border pl-[var(--offcut)] pr-[var(--offcut)]"
                   style={
                     {
                       scrollbarWidth: "none",