From d0aaa4d83bde73b89063084f556c956d1da3fe3e Mon Sep 17 00:00:00 2001
From: Peer Richelsen <peeroke@gmail.com>
Date: Mon, 5 Sep 2022 16:50:26 +0200
Subject: [PATCH] fixed horizontal nav on mobile, hiding scrollbar (#4176)

Co-authored-by: Alex van Andel <me@alexvanandel.com>
---
 apps/web/components/v2/eventtype/EventTypeSingleLayout.tsx | 2 +-
 packages/ui/v2/core/navigation/tabs/HorizontalTabs.tsx     | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/apps/web/components/v2/eventtype/EventTypeSingleLayout.tsx b/apps/web/components/v2/eventtype/EventTypeSingleLayout.tsx
index 4b165cc9ec..e24d0e22f3 100644
--- a/apps/web/components/v2/eventtype/EventTypeSingleLayout.tsx
+++ b/apps/web/components/v2/eventtype/EventTypeSingleLayout.tsx
@@ -245,7 +245,7 @@ function EventTypeSingleLayout({
           <div className="hidden xl:block">
             <VerticalTabs tabs={EventTypeTabs} sticky />
           </div>
-          <div className="p-2 md:p-0 xl:hidden">
+          <div className="relative left-0 right-0 -mx-6 w-[calc(100%+40px)] p-2 md:mx-0 md:p-0 xl:hidden">
             <HorizontalTabs tabs={EventTypeTabs} />
           </div>
           <div className="w-full ltr:mr-2 rtl:ml-2">
diff --git a/packages/ui/v2/core/navigation/tabs/HorizontalTabs.tsx b/packages/ui/v2/core/navigation/tabs/HorizontalTabs.tsx
index f2400c8223..eeac4d9c8d 100644
--- a/packages/ui/v2/core/navigation/tabs/HorizontalTabs.tsx
+++ b/packages/ui/v2/core/navigation/tabs/HorizontalTabs.tsx
@@ -9,7 +9,10 @@ export interface NavTabProps {
 const HorizontalTabs: FC<NavTabProps> = ({ tabs, ...props }) => {
   return (
     <>
-      <nav className="flex space-x-1 overflow-scroll md:overflow-visible" aria-label="Tabs" {...props}>
+      <nav
+        className="no-scrollbar flex space-x-1 overflow-scroll px-6 md:overflow-visible md:px-0"
+        aria-label="Tabs"
+        {...props}>
         {tabs.map((tab, idx) => (
           <HorizontalTabItem {...tab} key={idx} />
         ))}