From c796f5bb8167fe56aea3648409ed377d822ef87d Mon Sep 17 00:00:00 2001
From: Erik Tiekstra <erik.tiekstra@scandichotels.com>
Date: Wed, 17 Dec 2025 07:10:06 +0000
Subject: [PATCH] fix(BOOK-637): Using useLayoutEffect to avoid issues with
 refs with null values
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Approved-by: Matilda Landström
---
 .../HotelPage/TabNavigation/tabNavigation.module.css        | 5 ++---
 packages/common/hooks/useStickyPosition.ts                  | 6 +++---
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/apps/scandic-web/components/ContentType/HotelPage/TabNavigation/tabNavigation.module.css b/apps/scandic-web/components/ContentType/HotelPage/TabNavigation/tabNavigation.module.css
index 3e9aed4f7..121f04ff4 100644
--- a/apps/scandic-web/components/ContentType/HotelPage/TabNavigation/tabNavigation.module.css
+++ b/apps/scandic-web/components/ContentType/HotelPage/TabNavigation/tabNavigation.module.css
@@ -5,6 +5,7 @@
   background-color: var(--Background-Primary);
   border-bottom: 1px solid var(--Border-Default);
   width: 100%;
+  overflow: hidden;
   --gradient-color: var(--Background-Primary);
 
   &::before,
@@ -47,14 +48,13 @@
   display: flex;
   gap: var(--Space-x4);
   justify-content: flex-start;
-  width: var(--max-width-content);
+  width: min(100%, var(--max-width-content));
   margin: 0 auto;
   overflow-y: hidden;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
   scrollbar-width: none;
   white-space: nowrap;
-  margin-bottom: -1px; /* Adjust for border overlap */
 }
 
 .link {
@@ -89,7 +89,6 @@
 @media screen and (min-width: 1367px) {
   .tabsContainer {
     padding: 0 var(--Space-x5);
-    overflow-x: visible;
     margin: 0;
   }
 }
diff --git a/packages/common/hooks/useStickyPosition.ts b/packages/common/hooks/useStickyPosition.ts
index 5c84a3e09..288570fa2 100644
--- a/packages/common/hooks/useStickyPosition.ts
+++ b/packages/common/hooks/useStickyPosition.ts
@@ -1,6 +1,6 @@
 "use client"
 
-import { useCallback, useEffect } from "react"
+import { useCallback, useEffect, useLayoutEffect } from "react"
 
 import useStickyPositionStore, {
   type StickyElement,
@@ -45,7 +45,7 @@ export default function useStickyPosition({
   } = useStickyPositionStore()
   const baseTopOffset = 0
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (ref && name) {
       // Register the sticky element with the given ref, name, and group.
       // If the group is not provided, it defaults to the value of the name.
@@ -92,7 +92,7 @@ export default function useStickyPosition({
     [baseTopOffset, stickyElements]
   )
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (ref) {
       // Find the index of the current sticky element in the array of stickyElements.
       // This helps us determine its position relative to other sticky elements.