reponsive create and update food

src/pages/food/Create.tsx

@@ -102,13 +102,13 @@ const CreateFood: FC = () => {
 
     return (
         <div className='w-full mt-4'>
-            <div className='flex w-full justify-between items-center'>
+            <div className='flex flex-col sm:flex-row w-full justify-between items-start sm:items-center gap-4'>
                 <div className='text-lg font-light'>
                     غذای جدید
                 </div>
                 <div>
                     <Button
-                        className='px-5'
+                        className='px-5 w-full sm:w-auto'
                         onClick={() => formik.handleSubmit()}
                         isloading={isPending || isUploading}
                     >
@@ -120,9 +120,9 @@ const CreateFood: FC = () => {
                 </div>
             </div>
 
-            <div className='flex gap-6 mt-6'>
+            <div className='flex flex-col lg:flex-row gap-6 mt-6'>
                 <div className='flex-1'>
-                    <div className='bg-white py-8 xl:px-10 px-4 rounded-3xl'>
+                    <div className='bg-white py-6 sm:py-8 xl:px-10 px-4 rounded-3xl'>
                         <Input
                             label='نام غذا'
                             name='title'
@@ -147,7 +147,7 @@ const CreateFood: FC = () => {
                             />
                         </div>
 
-                        <div className='grid grid-cols-4 gap-4 mt-5'>
+                        <div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mt-5'>
                             <Input
                                 name='price'
                                 label='قیمت'
@@ -266,13 +266,15 @@ const CreateFood: FC = () => {
                     </div>
                 </div>
 
-                <CreateFoodSidebar
-                    isActive={isActive}
-                    isSpecial={isSpecial}
-                    onChangeActive={setIsActive}
-                    onChangeSpecial={setIsSpecial}
-                    onChangeImages={setImageFiles}
-                />
+                <div className='w-full lg:w-auto'>
+                    <CreateFoodSidebar
+                        isActive={isActive}
+                        isSpecial={isSpecial}
+                        onChangeActive={setIsActive}
+                        onChangeSpecial={setIsSpecial}
+                        onChangeImages={setImageFiles}
+                    />
+                </div>
             </div>
         </div>
     )

src/pages/food/Update.tsx

@@ -158,13 +158,13 @@ const UpdateFood: FC = () => {
 
   return (
     <div className='w-full mt-4'>
-      <div className='flex w-full justify-between items-center'>
+      <div className='flex flex-col sm:flex-row w-full justify-between items-start sm:items-center gap-4'>
         <div className='text-lg font-light'>
           ویرایش غذا
         </div>
         <div>
           <Button
-            className='px-5'
+            className='px-5 w-full sm:w-auto'
             onClick={() => formik.handleSubmit()}
             isloading={isPending || isUploading}
           >
@@ -176,9 +176,9 @@ const UpdateFood: FC = () => {
         </div>
       </div>
 
-      <div className='flex gap-6 mt-6'>
+      <div className='flex flex-col lg:flex-row gap-6 mt-6'>
         <div className='flex-1'>
-          <div className='bg-white py-8 xl:px-10 px-4 rounded-3xl'>
+          <div className='bg-white py-6 sm:py-8 xl:px-10 px-4 rounded-3xl'>
             <BasicInfoSection formik={formik} categories={categories} />
             <FoodContentSection formik={formik} />
             <MealTimesSection formik={formik} />
@@ -187,15 +187,17 @@ const UpdateFood: FC = () => {
           </div>
         </div>
 
-        <CreateFoodSidebar
-          isActive={isActive}
-          isSpecial={isSpecial}
-          onChangeActive={setIsActive}
-          onChangeSpecial={setIsSpecial}
-          onChangeImages={setImageFiles}
-          existingImages={existingImages}
-          onChangeExistingImages={setExistingImages}
-        />
+        <div className='w-full lg:w-auto'>
+          <CreateFoodSidebar
+            isActive={isActive}
+            isSpecial={isSpecial}
+            onChangeActive={setIsActive}
+            onChangeSpecial={setIsSpecial}
+            onChangeImages={setImageFiles}
+            existingImages={existingImages}
+            onChangeExistingImages={setExistingImages}
+          />
+        </div>
       </div>
     </div>
   )

src/pages/food/components/BasicInfoSection.tsx

@@ -37,7 +37,7 @@ const BasicInfoSection: FC<BasicInfoSectionProps> = ({ formik, categories }) =>
         />
       </div>
 
-      <div className='grid grid-cols-4 gap-4 mt-5'>
+      <div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mt-5'>
         <Input
           name='price'
           label='قیمت'

src/pages/food/components/CreateFoodSidebar.tsx

@@ -15,7 +15,7 @@ type Props = {
 
 const CreateFoodSidebar: FC<Props> = (props: Props) => {
     return (
-        <div className='bg-white w-[300px] text-xs h-fit px-5 py-7 rounded-3xl'>
+        <div className='bg-white w-full lg:w-[300px] text-xs h-fit px-5 py-7 rounded-3xl'>
 
             <div>
                 <div className='flex items-center justify-between'>

src/pages/food/components/MealTimesSection.tsx

@@ -35,7 +35,7 @@ const MealTimesSection: FC<MealTimesSectionProps> = ({ formik }) => {
         <div>15 تا 19 عصرانه</div>
         <div>18 تا 24 شام</div>
       </div>
-      <div className='flex gap-6 flex-wrap'>
+      <div className='flex gap-4 sm:gap-6 flex-wrap'>
         {mealTypes.map((mealType) => (
           <div key={mealType.value} className='flex items-center gap-2'>
             <Checkbox

src/pages/food/components/ServiceOptionsSection.tsx

@@ -11,7 +11,7 @@ const ServiceOptionsSection: FC<ServiceOptionsSectionProps> = ({ formik }) => {
   return (
     <div className='mt-6'>
       <div className='text-sm mb-3'>گزینه‌های سرویس</div>
-      <div className='flex gap-6 flex-wrap'>
+      <div className='flex gap-4 sm:gap-6 flex-wrap'>
         <div className='flex items-center gap-2'>
           <Checkbox
             checked={formik.values.pickupServe}

src/pages/food/components/WeekDaysSection.tsx

@@ -32,7 +32,7 @@ const WeekDaysSection: FC<WeekDaysSectionProps> = ({ formik }) => {
   return (
     <div className='mt-6'>
       <div className='text-sm mb-3'>روزهای هفته</div>
-      <div className='flex gap-6 flex-wrap'>
+      <div className='flex gap-4 sm:gap-6 flex-wrap'>
         {weekDays.map((day) => (
           <div key={day.value} className='flex items-center gap-2'>
             <Checkbox