fixes: scrollable and category highlight issue fixed

src/components/CategoryFilterBar.tsx

@@ -8,6 +8,7 @@ interface CategoryFilterBarProps {
 const CategoryFilterBar: React.FC<CategoryFilterBarProps> = ({ categories }) => {
   const [selected, setSelected] = useState(() => categories[0]?.id ?? '');
   const [hovered, setHovered] = useState('');
+  const STICKY_OFFSET = 140;
 
   useEffect(() => {
     if (!categories.length) {
@@ -21,6 +22,7 @@ const CategoryFilterBar: React.FC<CategoryFilterBarProps> = ({ categories }) =>
 
   const handleClick = (categoryId: string) => {
     setSelected(categoryId);
+    setHovered('');
     document.getElementById(categoryId)?.scrollIntoView({
       behavior: 'smooth',
       block: 'start',
@@ -29,21 +31,51 @@ const CategoryFilterBar: React.FC<CategoryFilterBarProps> = ({ categories }) =>
 
   useEffect(() => {
     if (!categories.length) return;
+    const lastCategoryId = categories[categories.length - 1]?.id ?? '';
+    let ticking = false;
 
-    const observer = new IntersectionObserver(
-      (entries) => {
-        const visibleSection = entries.find((entry) => entry.isIntersecting);
-        if (visibleSection) setSelected(visibleSection.target.id);
-      },
-      { threshold: 0.3 }
-    );
+    const updateSelectedByScroll = () => {
+      const anchorY = window.scrollY + STICKY_OFFSET + 8;
+      let activeId = categories[0].id;
 
-    categories.forEach((cat) => {
-      const el = document.getElementById(cat.id);
-      if (el) observer.observe(el);
-    });
+      for (const category of categories) {
+        const sectionEl = document.getElementById(category.id);
+        if (!sectionEl) continue;
+        if (sectionEl.offsetTop <= anchorY) {
+          activeId = category.id;
+        } else {
+          break;
+        }
+      }
+
+      // Ensure the last section gets selected near page bottom even if its top
+      // never crosses the anchor due to limited remaining scroll space.
+      const scrollBottom = window.scrollY + window.innerHeight;
+      const pageBottom = document.documentElement.scrollHeight;
+      if (pageBottom - scrollBottom <= 4) {
+        activeId = lastCategoryId || activeId;
+      }
+
+      setSelected((prev) => (prev === activeId ? prev : activeId));
+    };
+
+    const onScrollOrResize = () => {
+      if (ticking) return;
+      ticking = true;
+      window.requestAnimationFrame(() => {
+        updateSelectedByScroll();
+        ticking = false;
+      });
+    };
+
+    updateSelectedByScroll();
+    window.addEventListener('scroll', onScrollOrResize, { passive: true });
+    window.addEventListener('resize', onScrollOrResize);
 
-    return () => observer.disconnect();
+    return () => {
+      window.removeEventListener('scroll', onScrollOrResize);
+      window.removeEventListener('resize', onScrollOrResize);
+    };
   }, [categories]);
 
   if (!categories.length) return null;

src/components/ItemCard.tsx

@@ -26,10 +26,6 @@ const ItemCard: React.FC<ItemCardProps> = ({ product, onAddToCart }) => {
     typeof product.price === 'number' && Number.isFinite(product.price)
       ? product.price
       : 0;
-  const isDesktopOrTablet =
-    typeof window !== 'undefined'
-      ? window.matchMedia('(min-width: 640px)').matches
-      : false;
 
   // derive shopId from URL so we can pass to modal (optional)
   const parts =
@@ -41,35 +37,21 @@ const ItemCard: React.FC<ItemCardProps> = ({ product, onAddToCart }) => {
   return (
     <>
       <div
-        className={`rounded-xl shadow-md bg-white overflow-hidden flex flex-col ${isDesktopOrTablet ? 'cursor-pointer' : ''}`}
-        role={isDesktopOrTablet ? 'button' : undefined}
-        tabIndex={isDesktopOrTablet ? 0 : undefined}
-        onClick={
-          isDesktopOrTablet
-            ? () => {
-                setIsModalOpen(true);
-              }
-            : undefined
-        }
-        onKeyDown={
-          isDesktopOrTablet
-            ? (event) => {
-                if (event.key === 'Enter' || event.key === ' ') {
-                  event.preventDefault();
-                  setIsModalOpen(true);
-                }
-              }
-            : undefined
-        }
+        className="rounded-xl shadow-md bg-white overflow-hidden flex flex-col"
       >
-        <div className="w-full aspect-[4/3] overflow-hidden">
+        <button
+          type="button"
+          className="w-full aspect-[4/3] overflow-hidden cursor-pointer"
+          onClick={() => setIsModalOpen(true)}
+          aria-label={`View details for ${product.label}`}
+        >
           <img
             src={product.imageURL || 'https://via.placeholder.com/320x180'}
             alt={product.label}
             className="w-full h-full object-cover pointer-events-none select-none"
             draggable={false}
           />
-        </div>
+        </button>
         <div className="p-3 sm:p-4 flex flex-col justify-between flex-1 space-y-2">
           <h3 className="text-base sm:text-lg font-bold text-[var(--brand-secondary)] line-clamp-1">
             {product.label}

src/main.css

@@ -22,7 +22,7 @@
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
     overscroll-behavior-x: contain;
-    touch-action: pan-x;
+    touch-action: auto;
     padding-bottom: 0.5rem;
     scroll-snap-type: x proximity;
   }