Fix mobile scroll through slider sections

assets/custom/css/app.css

@@ -6,3 +6,4 @@
 [data-module=notification-w][data-notification-stack-ready]{height:auto;max-height:calc(100svh - 3.2rem);overflow:visible;scrollbar-width:none;overscroll-behavior:contain}[data-module=notification-w][data-notification-stack-ready]::-webkit-scrollbar{display:none}[data-module=notification-w][data-notification-stack-ready]:not(:hover):not([data-notification-expanded=true]){height:var(--notification-collapsed-height,6.6rem);max-height:var(--notification-collapsed-height,6.6rem)}[data-module=notification-w][data-notification-stack-ready]:is(:hover,[data-notification-expanded=true]){overflow-x:visible;overflow-y:auto;padding-bottom:.2rem}[data-module=notification-w][data-notification-stack-ready]>[data-module=notification]{position:relative;z-index:var(--notification-z,1);transform:translateY(var(--notification-stack-y,0));transition:transform .3s cubic-bezier(.22,1,.36,1)}[data-module=notification-w][data-notification-stack-ready]:is(:hover,[data-notification-expanded=true])>[data-module=notification]{transform:translateY(0)}
 .dock-icon.nodedc-app{overflow:hidden;background-color:transparent;background-image:none}.dock-icon.nodedc-app>img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;border-radius:inherit}
 [data-module=dock]{overflow:visible}[data-module=dock] .dock-icon{position:relative;overflow:visible}[data-module=dock] .dock-icon.nodedc-app{overflow:visible}[data-module=dock] .dock-icon::after{content:attr(data-dock-title);position:absolute;z-index:30;left:50%;bottom:calc(100% + .64rem);max-width:14rem;transform:translate(-50%,.28rem) scale(.96);transform-origin:50% 100%;opacity:0;pointer-events:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:1px solid rgba(255,255,255,.12);border-radius:.72rem;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.018)),rgba(34,34,38,.86);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 20px 60px rgba(0,0,0,.42);-webkit-backdrop-filter:blur(22px) saturate(1.15);backdrop-filter:blur(22px) saturate(1.15);color:rgba(255,255,255,.92);padding:.42rem .68rem;font-size:.68rem;font-weight:760;line-height:1;letter-spacing:0;transition:opacity .16s ease,transform .16s ease}[data-module=dock] .dock-icon:is(:hover,:focus-visible){z-index:20}[data-module=dock] .dock-icon:is(:hover,:focus-visible)::after{opacity:1;transform:translate(-50%,0) scale(1)}[data-module=dock] .dock-icon[data-dock-title=""]::after{display:none}
+@media screen and (max-width:767px){.c-viz{content-visibility:visible}}

assets/custom/css/out.css

@@ -6,3 +6,4 @@
 [data-module=notification-w][data-notification-stack-ready]{height:auto;max-height:calc(100svh - 3.2rem);overflow:visible;scrollbar-width:none;overscroll-behavior:contain}[data-module=notification-w][data-notification-stack-ready]::-webkit-scrollbar{display:none}[data-module=notification-w][data-notification-stack-ready]:not(:hover):not([data-notification-expanded=true]){height:var(--notification-collapsed-height,6.6rem);max-height:var(--notification-collapsed-height,6.6rem)}[data-module=notification-w][data-notification-stack-ready]:is(:hover,[data-notification-expanded=true]){overflow-x:visible;overflow-y:auto;padding-bottom:.2rem}[data-module=notification-w][data-notification-stack-ready]>[data-module=notification]{position:relative;z-index:var(--notification-z,1);transform:translateY(var(--notification-stack-y,0));transition:transform .3s cubic-bezier(.22,1,.36,1)}[data-module=notification-w][data-notification-stack-ready]:is(:hover,[data-notification-expanded=true])>[data-module=notification]{transform:translateY(0)}
 .dock-icon.nodedc-app{overflow:hidden;background-color:transparent;background-image:none}.dock-icon.nodedc-app>img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;border-radius:inherit}
 [data-module=dock]{overflow:visible}[data-module=dock] .dock-icon{position:relative;overflow:visible}[data-module=dock] .dock-icon.nodedc-app{overflow:visible}[data-module=dock] .dock-icon::after{content:attr(data-dock-title);position:absolute;z-index:30;left:50%;bottom:calc(100% + .64rem);max-width:14rem;transform:translate(-50%,.28rem) scale(.96);transform-origin:50% 100%;opacity:0;pointer-events:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:1px solid rgba(255,255,255,.12);border-radius:.72rem;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.018)),rgba(34,34,38,.86);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 20px 60px rgba(0,0,0,.42);-webkit-backdrop-filter:blur(22px) saturate(1.15);backdrop-filter:blur(22px) saturate(1.15);color:rgba(255,255,255,.92);padding:.42rem .68rem;font-size:.68rem;font-weight:760;line-height:1;letter-spacing:0;transition:opacity .16s ease,transform .16s ease}[data-module=dock] .dock-icon:is(:hover,:focus-visible){z-index:20}[data-module=dock] .dock-icon:is(:hover,:focus-visible)::after{opacity:1;transform:translate(-50%,0) scale(1)}[data-module=dock] .dock-icon[data-dock-title=""]::after{display:none}
+@media screen and (max-width:767px){.c-viz{content-visibility:visible}}

assets/custom/js/interaction-overrides.js

@@ -12,17 +12,21 @@
   const MEDIA_HANDLE_BOUND_FLAG = "__nodedcMediaHandleBound";
   const DOCK_LINK_BOUND_FLAG = "__nodedcDockLinkBound";
   const ORDERED_SLIDER_BOUND_FLAG = "__nodedcOrderedSliderBound";
+  const SLIDER_TOUCH_GUARD_FLAG = "__nodedcSliderTouchGuardBound";
   const LAZY_MEDIA_VIDEO_BOUND_FLAG = "__nodedcLazyMediaVideoBound";
   const SCROLL_HEIGHT_SYNC_FLAG = "__nodedcScrollHeightSyncBound";
   const NOTIFICATION_STACK_BOUND_FLAG = "__nodedcNotificationStackBound";
   const SCROLL_HEIGHT_SYNC_WARMUP_MS = 14000;
   const SCROLL_HEIGHT_SYNC_INTERVAL_MS = 90;
+  const SLIDER_TOUCH_INTENT_DISTANCE = 8;
+  const SLIDER_HORIZONTAL_INTENT_RATIO = 1.35;
   const IMAGE_EXTENSIONS = new Set(["avif", "gif", "jpeg", "jpg", "png", "svg", "webp"]);
   const VIDEO_EXTENSIONS = new Set(["m4v", "mov", "mp4", "webm"]);
   let lastDocumentScrollHeight = 0;
   let scrollHeightSyncFrame = 0;
   let scrollHeightSyncShouldForce = false;
   let scrollHeightDeferredSync = 0;
+  let activeSliderTouch = null;
 
   function isDesktopPointer() {
     return window.matchMedia?.("(pointer: fine)").matches ?? true;
@@ -333,6 +337,61 @@
     document.querySelectorAll('[data-module="mail-list"]').forEach(bindMailListWheel);
   }
 
+  function bindSliderTouchGuard() {
+    if (document[SLIDER_TOUCH_GUARD_FLAG]) return;
+    document[SLIDER_TOUCH_GUARD_FLAG] = true;
+
+    window.addEventListener(
+      "touchstart",
+      (event) => {
+        const slider = event.target?.closest?.('[data-module="slider"]');
+        const touch = event.touches?.[0];
+        activeSliderTouch = slider && touch
+          ? {
+              identifier: touch.identifier,
+              startX: touch.clientX,
+              startY: touch.clientY,
+              intent: "",
+            }
+          : null;
+      },
+      { capture: true, passive: true },
+    );
+
+    window.addEventListener(
+      "touchmove",
+      (event) => {
+        if (!activeSliderTouch) return;
+        const touch = Array.from(event.touches || []).find(
+          (candidate) => candidate.identifier === activeSliderTouch.identifier,
+        );
+        if (!touch) return;
+
+        const deltaX = Math.abs(touch.clientX - activeSliderTouch.startX);
+        const deltaY = Math.abs(touch.clientY - activeSliderTouch.startY);
+
+        if (!activeSliderTouch.intent) {
+          if (Math.max(deltaX, deltaY) < SLIDER_TOUCH_INTENT_DISTANCE) {
+            event.stopImmediatePropagation();
+            return;
+          }
+          activeSliderTouch.intent = deltaX > deltaY * SLIDER_HORIZONTAL_INTENT_RATIO ? "horizontal" : "vertical";
+        }
+
+        if (activeSliderTouch.intent === "vertical") {
+          event.stopImmediatePropagation();
+        }
+      },
+      { capture: true, passive: false },
+    );
+
+    const clearTouch = () => {
+      activeSliderTouch = null;
+    };
+    window.addEventListener("touchend", clearTouch, { capture: true, passive: true });
+    window.addEventListener("touchcancel", clearTouch, { capture: true, passive: true });
+  }
+
   function bindOrderedSlider(surface) {
     if (!surface || surface[ORDERED_SLIDER_BOUND_FLAG]) return;
 
@@ -582,6 +641,7 @@
   }
 
   bindScrollHeightSync();
+  bindSliderTouchGuard();
   hydrateMediaHandles();
   bindNotificationStacks();
 
@@ -590,6 +650,7 @@
       "DOMContentLoaded",
       () => {
         bindScrollHeightSync();
+        bindSliderTouchGuard();
         hydrateMediaHandles();
         bindInteractiveScroll();
         bindOrderedSliders();
@@ -603,6 +664,7 @@
     );
   } else {
     bindScrollHeightSync();
+    bindSliderTouchGuard();
     hydrateMediaHandles();
     bindInteractiveScroll();
     bindOrderedSliders();
@@ -615,6 +677,7 @@
 
   window.addEventListener("load", () => {
     bindScrollHeightSync();
+    bindSliderTouchGuard();
     hydrateMediaHandles();
     bindInteractiveScroll();
     bindOrderedSliders();