From 60391b5a3fd0d81c7bf79f0efca28d2c5a2cd0de Mon Sep 17 00:00:00 2001
From: Marc Mintel <marc@mintel.me>
Date: Tue, 23 Jun 2026 00:49:49 +0200
Subject: [PATCH] Fix: Replace JS padding logic with flawless pure CSS
 full-bleed container grid calculation

---
 components/blocks/ReferencesSlider.tsx | 33 ++++++++++++++++----------
 1 file changed, 20 insertions(+), 13 deletions(-)

diff --git a/components/blocks/ReferencesSlider.tsx b/components/blocks/ReferencesSlider.tsx
index 64ee42360..93035ddac 100644
--- a/components/blocks/ReferencesSlider.tsx
+++ b/components/blocks/ReferencesSlider.tsx
@@ -123,20 +123,27 @@ export function ReferencesSlider(props: ReferencesSliderProps) {
         </div>
       </div>
 
-      <div className="relative z-10">
+      <div className="container relative z-10">
         <div className="absolute right-0 top-0 bottom-0 w-16 bg-gradient-to-l from-neutral-dark to-transparent z-20 md:hidden pointer-events-none" />
-        <div 
-          ref={containerRef}
-          onMouseDown={onMouseDown}
-          onMouseLeave={onMouseLeave}
-          onMouseUp={onMouseUp}
-          onMouseMove={onMouseMove}
-          className={`select-none flex 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'}`}
-        >
-          {/* Robust Left Spacer for Pixel-Perfect Alignment */}
-          <div style={{ minWidth: paddingX }} className="flex-shrink-0 pointer-events-none" aria-hidden="true" />
-
-          {references.map((ref, i) => {
+        
+        {/* Pure CSS Full-Bleed Alignment Container */}
+        <div style={{ '--offset': 'calc(50vw - 50%)' } as React.CSSProperties}>
+          <div 
+            ref={containerRef}
+            onMouseDown={onMouseDown}
+            onMouseLeave={onMouseLeave}
+            onMouseUp={onMouseUp}
+            onMouseMove={onMouseMove}
+            style={{
+              marginLeft: 'calc(-1 * var(--offset))',
+              marginRight: 'calc(-1 * var(--offset))',
+              paddingLeft: 'var(--offset)',
+              paddingRight: 'var(--offset)',
+              scrollPaddingLeft: 'var(--offset)',
+            }}
+            className={`select-none flex 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 
               ? (typeof ref.image === 'string' ? ref.image : ref.image.url) 
               : fallbacks[i % fallbacks.length];