fix(BOOK-637): Using useLayoutEffect to avoid issues with refs with null values

Approved-by: Matilda Landström

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;
   }
 }

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.