Merge pull request #3619 from dfinity/fix-roadmap-bars

fix roadmap scrollbar
dfinity · Oct 17, 2024 · 97f4b2b · 97f4b2b
2 parents 596c71b + fa97b35
commit 97f4b2b
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git 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
@@ -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",