From 1c0d974245c9b4308b2a6b738fb6059d3e2e4182 Mon Sep 17 00:00:00 2001
From: Riadh mouamnia <riadh.mouamnia@gmail.com>
Date: Mon, 13 Nov 2023 13:23:19 +0100
Subject: [PATCH] style(products page): fix paginiation on mobile

fixes #87
---
 src/components/ProductFiltering/CategoryFilter.jsx            | 2 +-
 src/components/ProductFiltering/ListingTypeFilter.jsx         | 2 +-
 src/components/ProductFiltering/LocationFilter.jsx            | 2 +-
 src/components/ProductFiltering/Pagination.jsx                | 2 +-
 .../__test__/__snapshots__/Pagination.test.js.snap            | 2 +-
 src/pages/products/index.jsx                                  | 4 ++--
 6 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/ProductFiltering/CategoryFilter.jsx b/src/components/ProductFiltering/CategoryFilter.jsx
index 11f0c78..79520eb 100644
--- a/src/components/ProductFiltering/CategoryFilter.jsx
+++ b/src/components/ProductFiltering/CategoryFilter.jsx
@@ -36,7 +36,7 @@ function CategoryFilter({ t, queryParams }) {
           leaveFrom='transform opacity-100 scale-100'
           leaveTo='transform opacity-0 scale-95'
         >
-          <Menu.Items className='absolute max-h-52 overflow-y-scroll bg-white z-10 rounded-lg top-10 w-full'>
+          <Menu.Items className='absolute max-h-52 overflow-y-scroll no-scrollbar bg-white z-10 rounded-lg top-10 w-full ring-1 ring-black ring-opacity-5 drop-shadow-xl'>
             <div className='py-1'>
               {categories.map(({ name, dataKey }) => (
                 <Link
diff --git a/src/components/ProductFiltering/ListingTypeFilter.jsx b/src/components/ProductFiltering/ListingTypeFilter.jsx
index 7802d36..c5ea0fe 100644
--- a/src/components/ProductFiltering/ListingTypeFilter.jsx
+++ b/src/components/ProductFiltering/ListingTypeFilter.jsx
@@ -34,7 +34,7 @@ function ListingTypeFilter({ t, queryParams }) {
           leaveFrom='transform opacity-100 scale-100'
           leaveTo='transform opacity-0 scale-95'
         >
-          <Menu.Items className='absolute max-h-52 overflow-y-scroll bg-white z-10 rounded-lg top-10 w-full'>
+          <Menu.Items className='absolute max-h-52 overflow-y-scroll no-scrollbar bg-white z-10 rounded-lg top-10 w-full ring-1 ring-black ring-opacity-5 drop-shadow-xl'>
             <div className='py-1'>
               {listingTypes.map((type) => (
                 <Link
diff --git a/src/components/ProductFiltering/LocationFilter.jsx b/src/components/ProductFiltering/LocationFilter.jsx
index 7e02ded..de7705f 100644
--- a/src/components/ProductFiltering/LocationFilter.jsx
+++ b/src/components/ProductFiltering/LocationFilter.jsx
@@ -37,7 +37,7 @@ function LocationFilter({ t, queryParams }) {
           leaveFrom='transform opacity-100 scale-100'
           leaveTo='transform opacity-0 scale-95'
         >
-          <Menu.Items className='absolute max-h-52 overflow-y-scroll bg-white z-10 rounded-lg top-10 w-full'>
+          <Menu.Items className='absolute max-h-52 no-scrollbar overflow-y-scroll bg-white z-10 rounded-lg top-10 w-full ring-1 ring-black ring-opacity-5 drop-shadow-xl'>
             <div className='py-1'>
               {states.map(({ name, dataKey }) => (
                 <Link
diff --git a/src/components/ProductFiltering/Pagination.jsx b/src/components/ProductFiltering/Pagination.jsx
index 86f8ebb..224bf0d 100644
--- a/src/components/ProductFiltering/Pagination.jsx
+++ b/src/components/ProductFiltering/Pagination.jsx
@@ -28,7 +28,7 @@ function Pagination({ page, pageSize, totalItems, queryParams, totalPages }) {
   };
 
   return (
-    <div className='flex items-center justify-between'>
+    <div className='flex items-center justify-center md:justify-between flex-wrap gap-4'>
       <div className='flex gap-4'>
         <button
           className='btn btn-sm normal-case font-normal tracking-wide'
diff --git a/src/components/ProductFiltering/__test__/__snapshots__/Pagination.test.js.snap b/src/components/ProductFiltering/__test__/__snapshots__/Pagination.test.js.snap
index f07726b..c116ba6 100644
--- a/src/components/ProductFiltering/__test__/__snapshots__/Pagination.test.js.snap
+++ b/src/components/ProductFiltering/__test__/__snapshots__/Pagination.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`renders correctly 1`] = `
 <div
-  className="flex items-center justify-between"
+  className="flex items-center justify-center md:justify-between flex-wrap gap-4"
 >
   <div
     className="flex gap-4"
diff --git a/src/pages/products/index.jsx b/src/pages/products/index.jsx
index 45665d8..0a24490 100644
--- a/src/pages/products/index.jsx
+++ b/src/pages/products/index.jsx
@@ -33,7 +33,7 @@ function ProductsPage({
       <div className='relative md:h-[75vh] h-[80vh] overflow-x-hidden w-full'>
         <Carousel t={t} items={categories} queryParams={queryParams} />
       </div>
-      <div className='flex flex-col lg:flex-row px-8 gap-8 mt-8 items-start'>
+      <div className='flex flex-col lg:flex-row px-8 gap-8 mt-10 items-start min-h-[80vh]'>
         <div className='lg:w-[30%] h-full w-full bg-white drop-shadow-lg p-4 rounded-xl flex gap-6 flex-col'>
           <h3 className='flex gap-2 items-center text-2xl tracking-wide lg:mb-8'>
             <MdFilterList /> Filters
@@ -65,7 +65,7 @@ function ProductsPage({
             </Link>
           </div>
           <div className='bg-white drop-shadow-lg rounded-xl p-4 flex flex-col gap-4'>
-            <div className='flex flex-wrap gap-4 items-center justify-start w-full'>
+            <div className='flex flex-wrap gap-4 items-center justify-center md:justify-start w-full'>
               {items.map((item) => (
                 <Link
                   key={item.id}