Fix nav tab-stick position (calcom#27097)

Author: volnei

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"
             />

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

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 () => {