feat(SW-392): Added tab navigation click tracking

components/ContentType/HotelPage/TabNavigation/index.tsx

@@ -10,6 +10,7 @@ import Link from "@/components/TempDesignSystem/Link"
 import useHash from "@/hooks/useHash"
 import useScrollSpy from "@/hooks/useScrollSpy"
 import useStickyPosition from "@/hooks/useStickyPosition"
+import { trackHotelTabClick } from "@/utils/tracking"
 
 import styles from "./tabNavigation.module.css"
 
@@ -95,7 +96,10 @@ export default function TabNavigation({
               color="burgundy"
               textDecoration="none"
               scroll={true}
-              onClick={pauseScrollSpy}
+              onClick={() => {
+                pauseScrollSpy()
+                trackHotelTabClick(link.text)
+              }}
             >
               {link.text}
             </Link>

components/ContentType/HotelPage/hotelPage.module.css

@@ -5,7 +5,8 @@
 
   --hotel-page-navigation-height: 59px;
   --hotel-page-scroll-margin-top: calc(
-    var(--hotel-page-navigation-height) + var(--Spacing-x2)
+    var(--hotel-page-navigation-height) + var(--booking-widget-mobile-height) +
+      var(--Spacing-x2)
   );
   display: grid;
   grid-template-areas:
@@ -37,6 +38,7 @@
 .overview {
   display: grid;
   gap: var(--Spacing-x3);
+  scroll-margin-top: var(--hotel-page-scroll-margin-top);
 }
 
 .introContainer {
@@ -44,7 +46,6 @@
   flex-wrap: wrap;
   justify-content: space-between;
   gap: var(--Spacing-x4);
-  scroll-margin-top: var(--hotel-page-scroll-margin-top);
 }
 
 .alertsContainer {
@@ -65,6 +66,10 @@
 
 @media screen and (min-width: 1367px) {
   .pageContainer {
+    --hotel-page-scroll-margin-top: calc(
+      var(--hotel-page-navigation-height) + var(--booking-widget-desktop-height) +
+        var(--Spacing-x2)
+    );
     grid-template-areas:
       "header mapContainer"
       "tabNavigation mapContainer"