@pradip1995/segment-animation-shop-grid 0.1.4 → 0.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pradip1995/segment-animation-shop-grid",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "license": "MIT",
   "publishConfig": {
     "access": "public"

package/src/animation-shop-grid.css

@@ -1,6 +1,6 @@
 .animation-shop-grid {
   width: 100%;
-  padding: 0 1.5rem 4rem 1.5rem;
+  padding: 0 0 3rem 0;
   background-color: var(--page-bg, #ffffff);
   color: var(--text-color, #111111);
   font-family: inherit;
@@ -9,7 +9,7 @@
 
 @media (min-width: 1024px) {
   .animation-shop-grid {
-    padding: 0 3rem 6rem 3rem;
+    padding: 0 0 6rem 0;
   }
 }
 

package/src/animation-shop-grid.tsx

@@ -382,6 +382,15 @@ export default function AnimationShopGrid(props: {
   useEffect(() => {
     const sidebar = document.querySelector(".store-page__sidebar") as HTMLElement | null
     const mainCol = document.querySelector(".store-page__main") as HTMLElement | null
+    const isDesktop = typeof window !== "undefined" && window.matchMedia("(min-width: 1024px)").matches
+
+    if (!isDesktop) {
+      // Mobile uses segment-mobile-filters — never force sidebar display
+      if (sidebar) sidebar.style.display = ""
+      if (mainCol) mainCol.classList.remove("w-full", "col-span-full")
+      return
+    }
+
     if (sidebar) {
       sidebar.style.display = showFilters ? "" : "none"
     }
@@ -394,6 +403,10 @@ export default function AnimationShopGrid(props: {
     }
   }, [showFilters])
 
+  function handleFilterToggle() {
+    setShowFilters((v) => !v)
+  }
+
   return (
     <section className="animation-shop-grid flex-1 min-w-0 pt-0" aria-label="Product results">
       {/* Simplified, Clean Hero Header */}
@@ -420,13 +433,13 @@ export default function AnimationShopGrid(props: {
         </p>
       </motion.header>
 
-      {/* Filter Toolbar with Hide Filters Option */}
-      <div className="w-full flex flex-wrap items-center justify-between gap-3 mb-5 py-2.5 px-4 bg-white border border-gray-200/80 rounded-md shadow-2xs">
-        <div className="flex items-center gap-3">
+      {/* Filter Toolbar */}
+      <div className="animation-shop-grid__toolbar w-full flex flex-wrap items-center justify-between gap-2 sm:gap-3 mb-4 sm:mb-5 py-2 sm:py-2.5 px-2.5 sm:px-4 bg-white border border-gray-200/80 rounded-md shadow-2xs">
+        <div className="flex items-center gap-2 sm:gap-3 min-w-0">
           <button
             type="button"
-            onClick={() => setShowFilters(!showFilters)}
-            className="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-wider text-gray-800 hover:text-black transition-colors py-1 px-2.5 bg-gray-50 hover:bg-gray-100 border border-gray-200 rounded cursor-pointer"
+            onClick={handleFilterToggle}
+            className="hidden lg:inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-wider text-gray-800 hover:text-black transition-colors py-1.5 px-2.5 bg-gray-50 hover:bg-gray-100 border border-gray-200 rounded cursor-pointer"
           >
             <svg className="w-3.5 h-3.5 fill-none stroke-current stroke-[1.8]" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" d="M10.5 6h9m-9 12h9m-15-6h15M3 6h3m-3 12h3m3-6h3" />
@@ -435,7 +448,7 @@ export default function AnimationShopGrid(props: {
           </button>
 
           {appliedFilters.length > 0 ? (
-            <div className="hidden sm:flex items-center gap-2">
+            <div className="hidden sm:flex items-center gap-2 flex-wrap">
               <span className="text-[11px] font-bold text-gray-400 uppercase tracking-wider">Active:</span>
               {appliedFilters.map((filter) => (
                 <LocalizedLink
@@ -452,17 +465,17 @@ export default function AnimationShopGrid(props: {
           ) : null}
         </div>
 
-        <div className="flex items-center gap-3 ml-auto">
-          <span className="text-xs text-gray-500 font-medium tracking-wide">
-            {showingCount} of {totalCount} {totalCount === 1 ? "Product" : "Products"}
+        <div className="flex items-center gap-2 sm:gap-3 ml-auto shrink-0">
+          <span className="text-[11px] sm:text-xs text-gray-500 font-medium tracking-wide">
+            {showingCount} of {totalCount}
           </span>
           {appliedFilters.length > 0 ? (
             <LocalizedLink
               href={buildClearAllFiltersHref(storeSearchParams)}
-              className="text-xs font-bold text-red-600 hover:text-red-700 uppercase tracking-wider underline ml-2"
+              className="text-[11px] sm:text-xs font-bold text-red-600 hover:text-red-700 uppercase tracking-wider underline"
               countryCode={countryCode}
             >
-              Clear All
+              Clear
             </LocalizedLink>
           ) : null}
         </div>