Category responsive

src/pages/food/Category.tsx

@@ -175,12 +175,12 @@ const CategoryFood: FC = () => {
     })
 
     return (
-        <div className="flex gap-6 p-6">
+        <div className="flex flex-col lg:flex-row gap-4 lg:gap-6 p-4 lg:p-6">
-            <div className="flex-1">
+            <div className="flex-1 w-full lg:w-auto">
-                <div className="flex items-center justify-between mb-6">
+                <div className="flex items-center justify-between mb-4 lg:mb-6">
-                    <h1 className="text-lg font-light">دسته بندی غذا</h1>
+                    <h1 className="text-base lg:text-lg font-light">دسته بندی غذا</h1>
                 </div>
-                <div>
+                <div className="mb-4 lg:mb-0">
                     <Filters
                         fields={[
                             {
@@ -193,6 +193,7 @@ const CategoryFood: FC = () => {
                     />
                 </div>
 
+                <div className="overflow-x-auto">
                     <Table
                         columns={columns}
                         data={filteredCategories}
@@ -200,6 +201,7 @@ const CategoryFood: FC = () => {
                         selectable
                     />
                 </div>
+            </div>
 
             <CategoryForm
                 formik={formik}

src/pages/food/components/CategoryForm.tsx

@@ -45,18 +45,18 @@ const CategoryForm: FC<Props> = ({
   }
 
   return (
-    <div className="w-[300px] bg-white rounded-3xl p-6 h-fit sticky top-6">
+    <div className="w-full lg:w-[300px] bg-white rounded-3xl p-4 lg:p-6 h-fit lg:sticky top-4 lg:top-6">
-      <h2 className="font-light mb-6">{isEditing ? 'ویرایش دسته بندی' : 'اضافه کردن دسته بندی'}</h2>
+      <h2 className="font-light mb-4 lg:mb-6 text-sm lg:text-base">{isEditing ? 'ویرایش دسته بندی' : 'اضافه کردن دسته بندی'}</h2>
 
-      <div className="flex items-center justify-between mb-6">
+      <div className="flex items-center justify-between mb-4 lg:mb-6">
-        <div className="text-sm">فعال</div>
+        <div className="text-xs lg:text-sm">فعال</div>
         <SwitchComponent
           active={isActive}
           onChange={onActiveChange}
         />
       </div>
 
-      <div className="mb-4">
+      <div className="mb-3 lg:mb-4">
         <Input
           label="عنوان دسته بندی"
           name="title"
@@ -66,19 +66,19 @@ const CategoryForm: FC<Props> = ({
         />
       </div>
 
-      <div className="mb-6">
+      <div className="mb-4 lg:mb-6">
-        <div className="text-sm mb-2 font-medium">آیکون دسته بندی</div>
+        <div className="text-xs lg:text-sm mb-2 font-medium">آیکون دسته بندی</div>
         <Button
           type="button"
           onClick={() => setIsIconModalOpen(true)}
-          className="w-full h-12 flex items-center justify-center gap-2"
+          className="w-full h-10 lg:h-12 flex items-center justify-center gap-2 text-xs lg:text-sm"
         >
-          <Image size={20} color="#fff" />
+          <Image size={18} color="#fff" className="lg:w-5 lg:h-5" />
           <span>انتخاب آیکون</span>
         </Button>
         {selectedIconUrl && (
-          <div className="mt-3 flex items-center gap-3 p-3 bg-gray-50 rounded-xl border border-gray-200">
+          <div className="mt-3 flex items-center gap-2 lg:gap-3 p-2 lg:p-3 bg-gray-50 rounded-xl border border-gray-200">
-            <div className="w-12 h-12 flex items-center justify-center bg-white rounded-lg border border-gray-200 p-2 flex-shrink-0">
+            <div className="w-10 h-10 lg:w-12 lg:h-12 flex items-center justify-center bg-white rounded-lg border border-gray-200 p-1.5 lg:p-2 flex-shrink-0">
               <img
                 src={selectedIconUrl}
                 alt="selected icon"
@@ -93,8 +93,8 @@ const CategoryForm: FC<Props> = ({
               />
             </div>
             <div className="flex-1 min-w-0">
-              <div className="text-xs text-gray-500 mb-1">آیکون انتخاب شده</div>
+              <div className="text-[10px] lg:text-xs text-gray-500 mb-0.5 lg:mb-1">آیکون انتخاب شده</div>
-              <div className="text-xs text-gray-400 truncate">
+              <div className="text-[10px] lg:text-xs text-gray-400 truncate">
                 {selectedIconUrl}
               </div>
             </div>
@@ -105,7 +105,7 @@ const CategoryForm: FC<Props> = ({
                   onIconUrlChange('')
                 }
               }}
-              className="text-gray-400 hover:text-red-500 transition-colors text-xl leading-none flex-shrink-0 w-6 h-6 flex items-center justify-center"
+              className="text-gray-400 hover:text-red-500 transition-colors text-lg lg:text-xl leading-none flex-shrink-0 w-5 h-5 lg:w-6 lg:h-6 flex items-center justify-center"
               title="حذف آیکون"
             >
               ×
@@ -124,10 +124,10 @@ const CategoryForm: FC<Props> = ({
 
       <Button
         onClick={() => formik.handleSubmit()}
-        className="w-full"
+        className="w-full h-10 lg:h-auto text-xs lg:text-sm"
         isloading={isSubmitting}
       >
-        <Add color='#fff' size={20} className="ml-2" />
+        <Add color='#fff' size={18} className="ml-2 lg:w-5 lg:h-5" />
         ذخیره
       </Button>
     </div>