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