reponsive create and update food

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>
   )