From 5a7ce63d384163b3e9460712737d040553b86409 Mon Sep 17 00:00:00 2001
From: Eunjae Lee <hey@eunjae.dev>
Date: Fri, 30 Jan 2026 16:09:51 +0100
Subject: [PATCH] fix: show bookings shell headings when v3 disabled (#27433)

* fix: show bookings shell headings when v3 disabled

* remove unused hook
---
 .../(main-nav)/bookings/[status]/page.tsx     |  9 ++++---
 .../useBookingsShellHeadingVisibility.ts      | 25 -------------------
 .../modules/bookings/views/bookings-view.tsx  |  4 ---
 3 files changed, 6 insertions(+), 32 deletions(-)
 delete mode 100644 apps/web/modules/bookings/hooks/useBookingsShellHeadingVisibility.ts

diff --git a/apps/web/app/(use-page-wrapper)/(main-nav)/bookings/[status]/page.tsx b/apps/web/app/(use-page-wrapper)/(main-nav)/bookings/[status]/page.tsx
index d8a8ac2fe0..134aff8efb 100644
--- a/apps/web/app/(use-page-wrapper)/(main-nav)/bookings/[status]/page.tsx
+++ b/apps/web/app/(use-page-wrapper)/(main-nav)/bookings/[status]/page.tsx
@@ -68,9 +68,12 @@ const Page = async ({ params }: PageProps) => {
 
   return (
     <ShellMainAppDir
-      heading={t("bookings")}
-      subtitle={t("bookings_description")}
-      headerClassName="bookings-shell-heading">
+      {...(!bookingsV3Enabled
+        ? {
+            heading: t("bookings"),
+            subtitle: t("bookings_description"),
+          }
+        : {})}>
       <BookingsList
         status={parsed.data.status}
         userId={userId}
diff --git a/apps/web/modules/bookings/hooks/useBookingsShellHeadingVisibility.ts b/apps/web/modules/bookings/hooks/useBookingsShellHeadingVisibility.ts
deleted file mode 100644
index f823b4bea6..0000000000
--- a/apps/web/modules/bookings/hooks/useBookingsShellHeadingVisibility.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-"use client";
-
-import { useLayoutEffect } from "react";
-
-const MARKER_CLASS = "bookings-shell-heading";
-
-export function useBookingsShellHeadingVisibility({ visible }: { visible: boolean }) {
-  useLayoutEffect(() => {
-    const marker = document.querySelector(`.${MARKER_CLASS}`);
-    if (!marker) return;
-
-    const headerWrapper = marker.closest("header")?.parentElement;
-    if (!headerWrapper) return;
-
-    if (visible) {
-      headerWrapper.classList.remove("hidden");
-    } else {
-      headerWrapper.classList.add("hidden");
-    }
-
-    return () => {
-      headerWrapper.classList.remove("hidden");
-    };
-  }, [visible]);
-}
diff --git a/apps/web/modules/bookings/views/bookings-view.tsx b/apps/web/modules/bookings/views/bookings-view.tsx
index 2720c2c32b..180d620259 100644
--- a/apps/web/modules/bookings/views/bookings-view.tsx
+++ b/apps/web/modules/bookings/views/bookings-view.tsx
@@ -8,10 +8,8 @@ import classNames from "@calcom/ui/classNames";
 import dynamic from "next/dynamic";
 import { usePathname } from "next/navigation";
 import { useMemo } from "react";
-
 import { useFeatureOptInBanner } from "../../feature-opt-in/hooks/useFeatureOptInBanner";
 import { BookingListContainer } from "../components/BookingListContainer";
-import { useBookingsShellHeadingVisibility } from "../hooks/useBookingsShellHeadingVisibility";
 import { useBookingsView } from "../hooks/useBookingsView";
 import type { validStatuses } from "../lib/validStatuses";
 
@@ -74,8 +72,6 @@ function BookingsContent({ status, permissions, bookingsV3Enabled, bookingAuditE
   const [view] = useBookingsView({ bookingsV3Enabled });
   const optInBanner = useFeatureOptInBanner("bookings-v3");
 
-  useBookingsShellHeadingVisibility({ visible: view === "list" });
-
   return (
     <div className={classNames(view === "calendar" && "-mb-8")}>
       {view === "list" && (