diff --git a/components/blocks/ReferencesSlider.tsx b/components/blocks/ReferencesSlider.tsx index 637f0db78..627ed47c3 100644 --- a/components/blocks/ReferencesSlider.tsx +++ b/components/blocks/ReferencesSlider.tsx @@ -46,6 +46,22 @@ export function ReferencesSlider(props: ReferencesSliderProps) { const scrollLeftRef = React.useRef(0); const isDraggingRef = React.useRef(false); const [isDragging, setIsDragging] = React.useState(false); + const [paddingX, setPaddingX] = React.useState(24); + + React.useEffect(() => { + const updatePadding = () => { + const containerEl = document.querySelector('#referenzen .container'); + if (containerEl) { + const rect = containerEl.getBoundingClientRect(); + const computedStyle = window.getComputedStyle(containerEl); + const pLeft = parseFloat(computedStyle.paddingLeft || '0'); + setPaddingX(rect.left + pLeft); + } + }; + updatePadding(); + window.addEventListener('resize', updatePadding); + return () => window.removeEventListener('resize', updatePadding); + }, []); const badge = props.badge || data?.badge || t('badge'); const title = props.title || data?.title || t('title'); @@ -115,7 +131,8 @@ export function ReferencesSlider(props: ReferencesSliderProps) { onMouseLeave={onMouseLeave} onMouseUp={onMouseUp} onMouseMove={onMouseMove} - className={`select-none flex gap-6 overflow-x-auto pb-8 pt-4 px-6 md:px-[max(2rem,calc((100vw_-_1280px)_/_2))] lg:px-[max(2.5rem,calc((100vw_-_1280px)_/_2))] [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden ${isDragging ? 'cursor-grabbing snap-none' : 'cursor-grab snap-x snap-mandatory'}`} + style={{ paddingLeft: paddingX, paddingRight: paddingX }} + className={`select-none flex gap-6 overflow-x-auto pb-8 pt-4 [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden ${isDragging ? 'cursor-grabbing snap-none' : 'cursor-grab snap-x snap-mandatory'}`} > {references.map((ref, i) => { const imgSrc = ref.image