From d535cff4e0e58f72a7630a80493cc5c2f20d3966 Mon Sep 17 00:00:00 2001
From: Jonath-z <jonathanzihindula95@gmail.com>
Date: Mon, 27 Jun 2022 16:33:15 +0200
Subject: [PATCH] category list responsive improved

---
 components/modules/Category/index.jsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/components/modules/Category/index.jsx b/components/modules/Category/index.jsx
index b8b9c03..7967881 100644
--- a/components/modules/Category/index.jsx
+++ b/components/modules/Category/index.jsx
@@ -4,16 +4,16 @@ import Link from "next/link";
 
 const Category = () => {
   return (
-    <div className="my-24 bg-white flex flex-col mr-5 border shadow-lg rounded-lg">
+    <div className="my-24 bg-white flex flex-col mr-5 border shadow-lg rounded-lg overflow-x-auto">
       <div className="flex justify-between items-center px-5 py-5 border-b border-gray-200">
         <h3 className="font-bold text-2xl">Category Lists</h3>
         <Link href="/admin/addcategory">
-          <button className="bg-primary text-white px-4 py-2 rounded-md">
+          <button className="bg-primary text-white px-4 py-2 rounded-md mobilesm:text-xs">
             Add New Category
           </button>
         </Link>
       </div>
-      <div className="flex justify-between px-5 py-5">
+      <div className="flex mobilesm:flex-col mobilesm:gap-3 justify-between px-5 py-5">
         <div className="flex items-center">
           <label htmlFor="numberOfItem">Show</label>
           <select
@@ -27,8 +27,8 @@ const Category = () => {
           </select>
           <p>entries</p>
         </div>
-        <div>
-          <label htmlFor="searchItem" className="px-4">
+        <div className="mobilesm:flex flex-col">
+          <label htmlFor="searchItem" className="px-4 mobilesm:px-0">
             Search:
           </label>
           <input