From 0f0513b8b75946b8f10f684a4cafb36acf87576c Mon Sep 17 00:00:00 2001
From: Peer Richelsen <peeroke@gmail.com>
Date: Thu, 9 Jun 2022 12:46:03 +0200
Subject: [PATCH] added no-scrollbar utility (#3031)

* added no-scrollbar utility

* added responsive variants

* undo prettier on global.css
---
 apps/web/components/NavTabs.tsx |  2 +-
 apps/web/styles/globals.css     | 19 +++++++++++++++++++
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/apps/web/components/NavTabs.tsx b/apps/web/components/NavTabs.tsx
index 7a2f26a6cc..361caf96d2 100644
--- a/apps/web/components/NavTabs.tsx
+++ b/apps/web/components/NavTabs.tsx
@@ -28,7 +28,7 @@ const NavTabs: FC<NavTabProps> = ({ tabs, linkProps, ...props }) => {
   return (
     <>
       <nav
-        className="-mb-px flex space-x-5 overflow-x-scroll rtl:space-x-reverse sm:rtl:space-x-reverse"
+        className="no-scrollbar -mb-px flex space-x-5 overflow-x-scroll rtl:space-x-reverse sm:rtl:space-x-reverse"
         aria-label="Tabs"
         {...props}>
         {tabs.map((tab) => {
diff --git a/apps/web/styles/globals.css b/apps/web/styles/globals.css
index 884e377818..2a17f90eb8 100644
--- a/apps/web/styles/globals.css
+++ b/apps/web/styles/globals.css
@@ -9,6 +9,25 @@
   --brand-text-color-dark-mode: #292929;
 }
 
+/*
+  Adds Utility to hide scrollbar to tailwind
+    https://github.com/tailwindlabs/tailwindcss/discussions/2394
+    https://github.com/tailwindlabs/tailwindcss/pull/5732
+*/
+@layer utilities {
+  @variants responsive {
+    /* Chrome, Safari and Opera */
+    .no-scrollbar::-webkit-scrollbar {
+      display: none;
+    }
+
+    .no-scrollbar {
+      -ms-overflow-style: none;  /* IE and Edge */
+      scrollbar-width: none;  /* Firefox */
+    }
+  }
+}
+
 /*
  * Override the default tailwindcss-forms styling (default is: 'colors.blue.600')
  * @see: https://github.com/tailwindlabs/tailwindcss-forms/issues/14#issuecomment-1005376006