activate the draggable feature in desktop size only

src/pages/menu/components/CategoriesList/CategoriesList.module.css

@@ -120,18 +120,31 @@
   gap: 0.5rem;
   padding: 0.5rem 1rem 1rem 1rem;
   margin-bottom: 0.5rem;
-  cursor: grab;
   user-select: none;
 }
 
-.categoriesContainer:active {
-  cursor: grabbing;
-}
-
 .categoriesContainer::-webkit-scrollbar {
   display: none;
 }
 
+/* Desktop drag cursor */
+@media (min-width: 1025px) {
+  .categoriesContainer {
+    cursor: grab;
+  }
+  
+  .categoriesContainer:active {
+    cursor: grabbing;
+  }
+}
+
+/* Mobile/Tablet - use default cursor */
+@media (max-width: 1024px) {
+  .categoriesContainer {
+    cursor: default;
+  }
+}
+
 /* Smooth scrolling for drag interactions */
 .categoriesContainer.dragging {
   scroll-behavior: auto;
@@ -170,6 +183,11 @@
     flex-wrap: nowrap;
     justify-content: flex-start;
     align-items: center;
+    cursor: grab;
+  }
+
+  .categoriesContainer:active {
+    cursor: grabbing;
   }
 
   .categoriesSticky {

src/pages/menu/components/CategoriesList/CategoriesList.tsx

@@ -25,12 +25,15 @@ export function CategoriesList({ categories }: CategoriesListProps) {
     setActiveCategory,
   } = useScrollHandler();
   const { isRTL } = useAppSelector((state) => state.locale);
-  
+
-  // Drag scroll functionality
+  // Drag scroll functionality (desktop only)
   const isDragging = useRef(false);
   const startX = useRef(0);
   const scrollLeft = useRef(0);
 
+  // Only enable drag on desktop (not mobile or tablet)
+  const isDesktop = !xs;
+
   const getCategoryCardStyle = useCallback(() => {
     if (xs) {
       return {
@@ -98,28 +101,39 @@ export function CategoriesList({ categories }: CategoriesListProps) {
     }
   }, [activeCategory, scrollCategoryCardIntoView]);
 
-  // Drag scroll event handlers
+  // Drag scroll event handlers (desktop only)
-  const handleMouseDown = useCallback((e: React.MouseEvent) => {
+  const handleMouseDown = useCallback(
-    const container = categoriesContainerRef?.current;
+    (e: React.MouseEvent) => {
-    if (!container) return;
+      if (!isDesktop) return;
 
-    isDragging.current = true;
+      const container = categoriesContainerRef?.current;
-    startX.current = e.pageX - container.offsetLeft;
+      if (!container) return;
-    scrollLeft.current = container.scrollLeft;
-    
-    // Prevent text selection during drag
-    e.preventDefault();
-  }, [categoriesContainerRef]);
 
-  const handleMouseMove = useCallback((e: React.MouseEvent) => {
+      isDragging.current = true;
-    const container = categoriesContainerRef?.current;
+      startX.current = e.pageX - container.offsetLeft;
-    if (!container || !isDragging.current) return;
+      scrollLeft.current = container.scrollLeft;
 
-    e.preventDefault();
+      // Prevent text selection during drag
-    const x = e.pageX - container.offsetLeft;
+      e.preventDefault();
-    const walk = (x - startX.current) * 2; // Multiply for faster scrolling
+    },
-    container.scrollLeft = scrollLeft.current - walk;
+    [categoriesContainerRef, isDesktop],
-  }, [categoriesContainerRef]);
+  );
+
+  const handleMouseMove = useCallback(
+    (e: React.MouseEvent) => {
+      // Only enable drag on desktop
+      if (!isDesktop) return;
+
+      const container = categoriesContainerRef?.current;
+      if (!container || !isDragging.current) return;
+
+      e.preventDefault();
+      const x = e.pageX - container.offsetLeft;
+      const walk = (x - startX.current) * 2; // Multiply for faster scrolling
+      container.scrollLeft = scrollLeft.current - walk;
+    },
+    [categoriesContainerRef, isDesktop],
+  );
 
   const handleMouseUp = useCallback(() => {
     isDragging.current = false;
@@ -129,27 +143,20 @@ export function CategoriesList({ categories }: CategoriesListProps) {
     isDragging.current = false;
   }, []);
 
-  // Touch event handlers for mobile
+  // Touch event handlers - disabled for mobile/tablet (use native scroll)
-  const handleTouchStart = useCallback((e: React.TouchEvent) => {
+  const handleTouchStart = useCallback(() => {
-    const container = categoriesContainerRef?.current;
+    // Disable custom touch handling - let native scroll work
-    if (!container) return;
+    return;
+  }, []);
 
-    isDragging.current = true;
+  const handleTouchMove = useCallback(() => {
-    startX.current = e.touches[0].pageX - container.offsetLeft;
+    // Disable custom touch handling - let native scroll work
-    scrollLeft.current = container.scrollLeft;
+    return;
-  }, [categoriesContainerRef]);
+  }, []);
-
-  const handleTouchMove = useCallback((e: React.TouchEvent) => {
-    const container = categoriesContainerRef?.current;
-    if (!container || !isDragging.current) return;
-
-    const x = e.touches[0].pageX - container.offsetLeft;
-    const walk = (x - startX.current) * 2;
-    container.scrollLeft = scrollLeft.current - walk;
-  }, [categoriesContainerRef]);
 
   const handleTouchEnd = useCallback(() => {
-    isDragging.current = false;
+    // Disable custom touch handling - let native scroll work
+    return;
   }, []);
 
   return (