From f7f4df6922269820010a48c550ca6f626240f9e7 Mon Sep 17 00:00:00 2001
From: Volnei Munhoz <volnei@cal.com>
Date: Wed, 21 Jan 2026 16:37:25 -0300
Subject: [PATCH] Fix nav tab-stick position (#27097)

---
 .../modules/event-types/components/EventTypeLayout.tsx |  1 +
 .../ui/components/navigation/tabs/VerticalTabs.tsx     | 10 ++++------
 .../ui/components/navigation/tabs/navigation.test.tsx  |  3 ++-
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/apps/web/modules/event-types/components/EventTypeLayout.tsx b/apps/web/modules/event-types/components/EventTypeLayout.tsx
index 12ba6a5f58..9a20565a06 100644
--- a/apps/web/modules/event-types/components/EventTypeLayout.tsx
+++ b/apps/web/modules/event-types/components/EventTypeLayout.tsx
@@ -296,6 +296,7 @@ function EventTypeSingleLayout({
               className="primary-navigation w-64"
               tabs={EventTypeTabs}
               sticky
+              stickyOffset="var(--navbar-height, 64px)"
               linkShallow
               itemClassname="items-start"
             />
diff --git a/packages/ui/components/navigation/tabs/VerticalTabs.tsx b/packages/ui/components/navigation/tabs/VerticalTabs.tsx
index 62ad2a6ef7..85c52e3a76 100644
--- a/packages/ui/components/navigation/tabs/VerticalTabs.tsx
+++ b/packages/ui/components/navigation/tabs/VerticalTabs.tsx
@@ -10,6 +10,7 @@ export interface NavTabProps {
   children?: React.ReactNode;
   className?: string;
   sticky?: boolean;
+  stickyOffset?: number | string;
   linkShallow?: boolean;
   linkScroll?: boolean;
   itemClassname?: string;
@@ -20,6 +21,7 @@ const NavTabs = function ({
   tabs,
   className = "",
   sticky,
+  stickyOffset = 24,
   linkShallow,
   linkScroll,
   itemClassname,
@@ -28,17 +30,13 @@ const NavTabs = function ({
 }: NavTabProps) {
   return (
     <nav
-      className={classNames(
-        `no-scrollbar flex flex-col stack-y-1 overflow-scroll ${className}`,
-        sticky && "sticky top-0 -mt-7"
-      )}
+      className={classNames(`no-scrollbar flex flex-col stack-y-1 overflow-scroll ${className}`, sticky && "sticky")}
       style={{
         maxWidth: "256px",
+        ...(sticky ? { top: stickyOffset } : {}),
       }}
       aria-label="Tabs"
       {...props}>
-      {/* padding top for sticky */}
-      {sticky && <div className="pt-6" />}
       {props.children}
       {tabs.map((tab, idx) => (
         <VerticalTabItem
diff --git a/packages/ui/components/navigation/tabs/navigation.test.tsx b/packages/ui/components/navigation/tabs/navigation.test.tsx
index 522ae52819..7361f61e4f 100644
--- a/packages/ui/components/navigation/tabs/navigation.test.tsx
+++ b/packages/ui/components/navigation/tabs/navigation.test.tsx
@@ -158,8 +158,9 @@ describe("Navigation Components", () => {
         }
       });
 
-      // Check sticky behavior
+      // Check sticky behavior with default offset
       await expect(container.firstChild).toHaveClass("sticky");
+      await expect(container.firstChild).toHaveStyle("top: 24px");
     });
 
     test("applies custom icon correctly", async () => {