From 9f176772ffe20f78c9202f3edcbca05f8731e659 Mon Sep 17 00:00:00 2001
From: HighImKevin <kevinjohncampbell@gmail.com>
Date: Fri, 9 Oct 2026 17:29:26 -0400
Subject: [PATCH] Fix scrolling sections not scrolling on mobile

---
 scripts/cardBuilder.css |  6 +++---
 scripts/cardBuilder.js  | 15 +++++++++++++--
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/scripts/cardBuilder.css b/scripts/cardBuilder.css
index d5f1619..76e13e2 100644
--- a/scripts/cardBuilder.css
+++ b/scripts/cardBuilder.css
@@ -2329,9 +2329,9 @@ html.sleekfin-main-ui .emby-scroller-container[data-section-id="liveTv-channels"
 	z-index: 1;
 }
 
-/* Row scroll lives on the slidee (JF .scrollSlider), not the outer frame */
-.custom-scroller-container .custom-scroller,
-.emby-scroller-container .custom-scroller {
+/* Desktop custom path: clip frame; slidee uses translateX. Mobile .scrollX keeps native overflow. */
+.custom-scroller-container .custom-scroller:not(.scrollX),
+.emby-scroller-container .custom-scroller:not(.scrollX) {
 	overflow: hidden;
 }
 
diff --git a/scripts/cardBuilder.js b/scripts/cardBuilder.js
index c78bce0..b79ce4b 100644
--- a/scripts/cardBuilder.js
+++ b/scripts/cardBuilder.js
@@ -7363,13 +7363,16 @@
         scroller.setAttribute('data-horizontal', 'true');
         scroller.setAttribute('data-centerfocus', 'true');
         scroller.className = `padded-top-focusscale padded-bottom-focusscale emby-scroller padded-left custom-scroller${isMobile ? " scrollX hiddenScrollX" : ""}`;
-        scroller.setAttribute('data-scroll-mode-x', 'custom');
+        scroller.setAttribute('data-scroll-mode-x', isMobile ? 'native' : 'custom');
         scroller.style.scrollSnapType = 'none';
         scroller.style.touchAction = 'auto';
         scroller.style.overscrollBehaviorX = 'contain';
         scroller.style.overscrollBehaviorY = 'auto';
         scroller.style.webkitOverflowScrolling = 'touch';
-        scroller.style.overflow = 'hidden';
+        // Desktop custom path: clip frame + translateX slidee. Mobile scrollX: native overflow swipe.
+        if (!isMobile) {
+            scroller.style.overflow = 'hidden';
+        }
         setStoredScrollPosition(scroller, 0);
 
         return scroller;
@@ -7742,6 +7745,7 @@
             }
 
             scroller.addEventListener('mousedown', onPointerDown);
+            scroller.addEventListener('touchstart', onPointerDown, { passive: true });
 
             // Trackpad / mouse wheel → custom transform scroll (native overflow scrollers handle this themselves).
             // Keep passive:false so we can preventDefault on horizontal gestures, but coalesce apply work
@@ -9200,6 +9204,13 @@
             );
             const scrollPosition = Math.min(Math.max(position, 0), maxPosition);
             const clamped = scrollPosition > 20 ? scrollPosition : 0;
+            // Clear any desktop slidee transform so it cannot fight native scrollLeft
+            const slidee = getScrollSlidee(scroller);
+            if (slidee) {
+                if (slidee.style.transform) slidee.style.transform = '';
+                if (slidee.style.transition) slidee.style.transition = '';
+            }
+            if (scroller.style.transform) scroller.style.transform = '';
             scroller.scrollTo({ left: clamped, behavior: animate ? 'smooth' : 'auto' });
             setStoredScrollPosition(scroller, clamped);
         } else {