scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Approved-by: Matilda Landström
This commit is contained in:
Erik Tiekstra
2025-12-17 07:10:06 +00:00
parent d8c19c8917
commit c796f5bb81
2 changed files with 5 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
apps/scandic-web/components/ContentType/HotelPage/TabNavigation/tabNavigation.module.css
View File

@@ -5,6 +5,7 @@
background-color: var(--Background-Primary); background-color: var(--Background-Primary);
border-bottom: 1px solid var(--Border-Default); border-bottom: 1px solid var(--Border-Default);
width: 100%; width: 100%;
overflow: hidden;
--gradient-color: var(--Background-Primary); --gradient-color: var(--Background-Primary);
&::before, &::before,
@@ -47,14 +48,13 @@
display: flex; display: flex;
gap: var(--Space-x4); gap: var(--Space-x4);
justify-content: flex-start; justify-content: flex-start;
width: var(--max-width-content); width: min(100%, var(--max-width-content));
margin: 0 auto; margin: 0 auto;
overflow-y: hidden; overflow-y: hidden;
overflow-x: auto; overflow-x: auto;
scroll-snap-type: x mandatory; scroll-snap-type: x mandatory;
scrollbar-width: none; scrollbar-width: none;
white-space: nowrap; white-space: nowrap;
margin-bottom: -1px; /* Adjust for border overlap */
} }
.link { .link {
@@ -89,7 +89,6 @@
@media screen and (min-width: 1367px) { @media screen and (min-width: 1367px) {
.tabsContainer { .tabsContainer {
padding: 0 var(--Space-x5); padding: 0 var(--Space-x5);
overflow-x: visible;
margin: 0; margin: 0;
} }
} }

6
packages/common/hooks/useStickyPosition.ts
View File

@@ -1,6 +1,6 @@
"use client" "use client"
import { useCallback, useEffect } from "react" import { useCallback, useEffect, useLayoutEffect } from "react"
import useStickyPositionStore, { import useStickyPositionStore, {
type StickyElement, type StickyElement,
@@ -45,7 +45,7 @@ export default function useStickyPosition({
} = useStickyPositionStore() } = useStickyPositionStore()
const baseTopOffset = 0 const baseTopOffset = 0
useEffect(() => { useLayoutEffect(() => {
if (ref && name) { if (ref && name) {
// Register the sticky element with the given ref, name, and group. // 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. // If the group is not provided, it defaults to the value of the name.
@@ -92,7 +92,7 @@ export default function useStickyPosition({
[baseTopOffset, stickyElements] [baseTopOffset, stickyElements]
) )
useEffect(() => { useLayoutEffect(() => {
if (ref) { if (ref) {
// Find the index of the current sticky element in the array of stickyElements. // Find the index of the current sticky element in the array of stickyElements.
// This helps us determine its position relative to other sticky elements. // This helps us determine its position relative to other sticky elements.