From e9bce5aac8bb26fce43b812d7ed585a40e4871c4 Mon Sep 17 00:00:00 2001
From: Philip Peterson <1326208+philip-peterson@users.noreply.github.com>
Date: Wed, 3 Jun 2026 02:31:16 -0700
Subject: [PATCH] Fix dragging issues

---
 web/modules/custom/riverside_pt/css/calendar.css           | 2 +-
 .../custom/riverside_pt/js/components/rpt-testimonials.js  | 7 +++----
 .../riverside_pt/templates/riverside-pt-home.html.twig     | 2 +-
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/web/modules/custom/riverside_pt/css/calendar.css b/web/modules/custom/riverside_pt/css/calendar.css
index e99d516..3586b2e 100644
--- a/web/modules/custom/riverside_pt/css/calendar.css
+++ b/web/modules/custom/riverside_pt/css/calendar.css
@@ -8,7 +8,7 @@
 @media (min-width: 640px) {
   .riverside-booking-wrap {
     flex-direction: row;
-    gap: 3rem;
+    gap: 2rem;
   }
 }
 
diff --git a/web/modules/custom/riverside_pt/js/components/rpt-testimonials.js b/web/modules/custom/riverside_pt/js/components/rpt-testimonials.js
index 797bb7a..57a8081 100644
--- a/web/modules/custom/riverside_pt/js/components/rpt-testimonials.js
+++ b/web/modules/custom/riverside_pt/js/components/rpt-testimonials.js
@@ -81,9 +81,7 @@ function Testimonials() {
 
   var onPointerMove = function (e) {
     if (!drag.current) return;
-    var delta = e.clientX - drag.current.x;
-    var max = measureMax();
-    setLeft(Math.min(0, Math.max(-max, drag.current.left + delta)));
+    setLeft(drag.current.left + (e.clientX - drag.current.x));
   };
 
   var onPointerUp = function (e) {
@@ -132,7 +130,8 @@ function Testimonials() {
           onPointerDown=${onPointerDown}
           onPointerMove=${onPointerMove}
           onPointerUp=${onPointerUp}
-          style=${{ position: "relative", top: 0, left: left + "px", transition: "left 0.5s ease", display: "flex", gap: GAP + "px", paddingBottom: "2px", width: TOTAL_W + "px" }}
+          onPointerCancel=${onPointerUp}
+          style=${{ position: "relative", top: 0, left: left + "px", transition: "left 0.5s ease", display: "flex", gap: GAP + "px", paddingBottom: "2px", width: TOTAL_W + "px", touchAction: "pan-y" }}
         >
           ${TESTIMONIALS.map(function (t, i) { return html`
             <div key=${i} style=${{ width: CARD_W + "px", flexShrink: 0 }} class="border border-gray-200 rounded-lg p-6 flex flex-col gap-5 bg-white">
diff --git a/web/modules/custom/riverside_pt/templates/riverside-pt-home.html.twig b/web/modules/custom/riverside_pt/templates/riverside-pt-home.html.twig
index c2738a5..9b2228d 100644
--- a/web/modules/custom/riverside_pt/templates/riverside-pt-home.html.twig
+++ b/web/modules/custom/riverside_pt/templates/riverside-pt-home.html.twig
@@ -116,7 +116,7 @@
 </section>
 
 <section class="py-24 px-6 bg-white">
-  <div class="max-w-[900px] mx-auto">
+  <div class="max-w-[700px] mx-auto">
     <h2 class="text-[clamp(2.5rem,5vw,4rem)] font-serif font-light text-gray-800 mb-10 text-center">Book An Appointment</h2>
     <rpt-appt-type class="block mb-10"></rpt-appt-type>
     <div class="riverside-booking-wrap">