From 3f8095fc9bfe6c29a1e917d9a4da77d55690ff63 Mon Sep 17 00:00:00 2001
From: Stephen Cameron <stephen@cubedesigners.com>
Date: Tue, 3 Sep 2019 18:30:12 +0200
Subject: [PATCH] Done #2962 @1

---
 resources/js/components/ProductsFilters.vue | 8 ++++----
 resources/styles/components/products.styl   | 9 +++++++--
 resources/views/pages/products.blade.php    | 2 +-
 3 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/resources/js/components/ProductsFilters.vue b/resources/js/components/ProductsFilters.vue
index a9ed958..8d2ce38 100644
--- a/resources/js/components/ProductsFilters.vue
+++ b/resources/js/components/ProductsFilters.vue
@@ -1,9 +1,9 @@
 <template>
 
-    <div class="flex relative items-start">
+    <div class="flex relative items-start sm:block">
 
         <!-- Filters column -->
-        <div class="products-filters-wrapper sticky top-0 mr-1v pt-4 whitespace-no-wrap">
+        <div class="products-filters-wrapper sticky sm:static top-0 mr-1v sm:mr-0 pt-4 whitespace-no-wrap">
 
             <!-- Filters panel -->
             <div class="bg-white p-4">
@@ -11,7 +11,7 @@
 
                     <hr class="h-px bg-grey-250 my-4" v-if="index !== 0" />
 
-                    <h3 class="text-base mb-2">{{ filter.label }}</h3>
+                    <h3 class="text-base mb-2 whitespace-normal">{{ filter.label }}</h3>
 
                     <ul v-if="filter.type === 'list'">
                         <li v-for="(option, option_index) in filter.options" :key="option_index" class="flex justify-between py-1 text-sm">
@@ -54,7 +54,7 @@
         <div class="products-grid flex-grow">
 
             <!-- Grid summary header -->
-            <div class="products-grid-summary sticky top-0 z-10 bg-grey-100 pt-4 pb-4 flex justify-between md:block">
+            <div class="products-grid-summary sticky sm:static top-0 z-10 bg-grey-100 pt-4 pb-4 flex justify-between sm:block">
 
                 <!-- Active filters -->
                 <div class="products-grid-active-filters flex-grow text-sm">
diff --git a/resources/styles/components/products.styl b/resources/styles/components/products.styl
index 629b502..dd5d0d7 100644
--- a/resources/styles/components/products.styl
+++ b/resources/styles/components/products.styl
@@ -9,7 +9,12 @@
     // on this min-width setting...
 
     &.grid-cols-auto
-      grid-template-columns: repeat(auto-fill, minmax(270px, 1fr))
+      grid-template-columns: repeat(auto-fill, minmax(275px, 1fr))
+
+      // On the smaller screens, 270px min-width is sometimes too wide
+      // when including the content padding so reduce it when getting close.
+      +below(960px)
+        grid-template-columns: repeat(auto-fill, minmax(225px, 1fr))
 
 
     .product-highlights
@@ -32,4 +37,4 @@
     width: 70%
     height: 70%
     top: 15%
-    left: 15%
\ No newline at end of file
+    left: 15%
diff --git a/resources/views/pages/products.blade.php b/resources/views/pages/products.blade.php
index e33aa0e..db30dd4 100644
--- a/resources/views/pages/products.blade.php
+++ b/resources/views/pages/products.blade.php
@@ -20,7 +20,7 @@
             @endif
 
                 {{-- Product Grid --}}
-                <grid cols="auto" class="products-grid mt-6">
+                <grid cols="auto" class="products-grid mt-6 sm:mt-2">
                     @foreach($products as $id => $product)
                         @include('partials.product-link', ['id' => $id, 'product' => $product])
                     @endforeach
-- 
2.39.5