fix: handlers component on mobile

1 files changed, 44 insertions, 4 deletions

diff --git a/apps/web/src/components/landing/handlebars.tsx b/apps/web/src/components/landing/handlebars.tsx
index 36705e90..e2eb2573 100644
--- a/apps/web/src/components/landing/handlebars.tsx
+++ b/apps/web/src/components/landing/handlebars.tsx
@@ -19,6 +19,7 @@ export function Handlebars({
   const [leftHandle, setLeftHandle] = useState(0);
   const [rightHandle, setRightHandle] = useState(maxWidth);
   const [contentWidth, setContentWidth] = useState(maxWidth);
+  const [isDragging, setIsDragging] = useState(false);
 
   const leftHandleX = useMotionValue(0);
   const rightHandleX = useMotionValue(maxWidth);
@@ -33,6 +34,27 @@ export function Handlebars({
   const containerRef = useRef<HTMLDivElement>(null);
   const measureRef = useRef<HTMLDivElement>(null);
 
+  // Prevent scroll when dragging on mobile
+  useEffect(() => {
+    const preventDefault = (e: TouchEvent) => {
+      if (isDragging) {
+        e.preventDefault();
+      }
+    };
+
+    if (isDragging) {
+      document.addEventListener("touchmove", preventDefault, {
+        passive: false,
+      });
+      document.body.style.overflow = "hidden";
+    }
+
+    return () => {
+      document.removeEventListener("touchmove", preventDefault);
+      document.body.style.overflow = "";
+    };
+  }, [isDragging]);
+
   useEffect(() => {
     if (!measureRef.current) return;
 
@@ -80,6 +102,14 @@ export function Handlebars({
     setRightHandle(newRight);
   };
 
+  const handleDragStart = () => {
+    setIsDragging(true);
+  };
+
+  const handleDragEnd = () => {
+    setIsDragging(false);
+  };
+
   return (
     <div className="flex justify-center gap-4 leading-[4rem] mt-0 md:mt-2">
       <div
@@ -95,8 +125,10 @@ export function Handlebars({
         style={{ width: contentWidth }}
       >
         <div className="absolute inset-0 w-full h-full rounded-2xl border border-yellow-500 flex justify-between">
+          {/* Left Handle */}
           <motion.div
-            className="h-full border border-yellow-500 w-7 rounded-full bg-accent flex items-center justify-center cursor-ew-resize select-none"
+            className="h-full border border-yellow-500 rounded-full bg-accent flex items-center justify-center cursor-ew-resize select-none touch-none
+                       w-9 md:w-7 min-h-[44px] md:min-h-0"
             style={{
               position: "absolute",
               x: leftHandleX,
@@ -108,19 +140,24 @@ export function Handlebars({
             dragElastic={0}
             dragMomentum={false}
             onDrag={handleLeftDrag}
+            onDragStart={handleDragStart}
+            onDragEnd={handleDragEnd}
             whileHover={{ scale: 1.05 }}
             whileDrag={{ scale: 1.1 }}
+            whileTap={{ scale: 1.1 }}
             transition={{ type: "spring", stiffness: 400, damping: 30 }}
           >
             <div className="w-2 h-8 rounded-full bg-yellow-500"></div>
           </motion.div>
 
+          {/* Right Handle */}
           <motion.div
-            className="h-full border border-yellow-500 w-7 rounded-full bg-accent flex items-center justify-center cursor-ew-resize select-none"
+            className="h-full border border-yellow-500 rounded-full bg-accent flex items-center justify-center cursor-ew-resize select-none touch-none
+                       w-9 md:w-7 min-h-[44px] md:min-h-0"
             style={{
               position: "absolute",
               x: rightHandleX,
-              left: -30,
+              left: -36, // Adjusted for larger mobile handle
               zIndex: 10,
             }}
             drag="x"
@@ -131,8 +168,11 @@ export function Handlebars({
             dragElastic={0}
             dragMomentum={false}
             onDrag={handleRightDrag}
+            onDragStart={handleDragStart}
+            onDragEnd={handleDragEnd}
             whileHover={{ scale: 1.05 }}
             whileDrag={{ scale: 1.1 }}
+            whileTap={{ scale: 1.1 }}
             transition={{ type: "spring", stiffness: 400, damping: 30 }}
           >
             <div className="w-2 h-8 rounded-full bg-yellow-500"></div>
@@ -161,4 +201,4 @@ export function Handlebars({
       </div>
     </div>
   );
-};
+}