From 2e3b721585cf34ab621af3284cafaea4dfdb5748 Mon Sep 17 00:00:00 2001
From: AmirReza Jamali <amir7jamali.ar@yahoo.com>
Date: Wed, 15 Apr 2026 15:25:47 +0330
Subject: [PATCH] refactor(forms): enhance grid layout and responsiveness
 across multiple components

- Updated grid classes in CreateAdmin, CreateCompany, CreateCompanyCategory, CreateCustomer, and CreateNotification components to improve responsiveness.
- Adjusted FormFooter and ListHeader components for better layout handling on different screen sizes.
---
 src/components/forms/admins/CreateAdmin.tsx            |  6 ++++--
 src/components/forms/companies/CreateCompany.tsx       |  2 +-
 .../company-categories/CreateCompanyCategory.tsx       | 10 ++++++----
 src/components/forms/customers/CreateCustomer.tsx      |  6 ++++--
 .../forms/notifications/CreateNotification.tsx         |  8 +++++---
 src/components/ui/FormFooter.tsx                       |  2 +-
 src/components/ui/ListHeader.tsx                       |  4 ++--
 7 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/src/components/forms/admins/CreateAdmin.tsx b/src/components/forms/admins/CreateAdmin.tsx
index bf6392e..c17326e 100644
--- a/src/components/forms/admins/CreateAdmin.tsx
+++ b/src/components/forms/admins/CreateAdmin.tsx
@@ -30,7 +30,7 @@ const CreateAdminForm: FC<IProps> = ({ defaultValues, editMode, id }) => {
       <div className="flex flex-col gap-9">
         <ShowcaseSection
           title="Input Fields"
-          className="grid grid-cols-2 gap-5"
+          className="grid grid-cols-1 gap-5 md:grid-cols-2"
         >
           <div>
             <InputGroup
@@ -241,7 +241,9 @@ const CreateAdminForm: FC<IProps> = ({ defaultValues, editMode, id }) => {
             )}
           </div>
 
-          <FormFooter />
+          <div className="md:col-span-2">
+            <FormFooter />
+          </div>
         </ShowcaseSection>
       </div>
     </form>
diff --git a/src/components/forms/companies/CreateCompany.tsx b/src/components/forms/companies/CreateCompany.tsx
index e069acf..2da9202 100644
--- a/src/components/forms/companies/CreateCompany.tsx
+++ b/src/components/forms/companies/CreateCompany.tsx
@@ -34,7 +34,7 @@ const CreateCompany = ({ defaultValues, editMode, id }: IProps) => {
   });
   return (
     <form
-      className="grid grid-cols-1 items-start gap-9 rounded-xl bg-gray-1 p-10 dark:bg-gray-7 sm:grid-cols-2"
+      className="grid grid-cols-1 items-start gap-9 rounded-xl bg-gray-1 p-10 dark:bg-gray-7 md:grid-cols-2"
       onSubmit={handleSubmit(onSubmit)}
     >
       <div className="flex flex-col gap-9">
diff --git a/src/components/forms/companies/company-categories/CreateCompanyCategory.tsx b/src/components/forms/companies/company-categories/CreateCompanyCategory.tsx
index 6cd7c5d..86f9148 100644
--- a/src/components/forms/companies/company-categories/CreateCompanyCategory.tsx
+++ b/src/components/forms/companies/company-categories/CreateCompanyCategory.tsx
@@ -20,9 +20,9 @@ const CreateCompanyCategoryForm = ({ defaultValues, editMode, id }: IProps) => {
     <form className="grid grid-cols-1 gap-9" onSubmit={handleSubmit(onSubmit)}>
       <ShowcaseSection
         title="Create Company Category"
-        className="grid grid-cols-2 gap-5"
+        className="grid grid-cols-1 gap-5 md:grid-cols-2"
       >
-        <div className="flex flex-col gap-2">
+        <div className="flex flex-col gap-2 md:col-span-1">
           <InputGroup
             label="Name"
             {...register("name", {
@@ -47,7 +47,7 @@ const CreateCompanyCategoryForm = ({ defaultValues, editMode, id }: IProps) => {
             <p className="mt-1 text-sm text-red-500">{errors.name.message}</p>
           )}
         </div>
-        <div className="flex flex-col gap-2">
+        <div className="flex flex-col gap-2 md:col-span-1">
           <TextAreaGroup
             label="Description"
             {...register("description", {
@@ -69,7 +69,9 @@ const CreateCompanyCategoryForm = ({ defaultValues, editMode, id }: IProps) => {
             </p>
           )}
         </div>
-        <FormFooter />
+        <div className="md:col-span-2">
+          <FormFooter />
+        </div>
       </ShowcaseSection>
     </form>
   );
diff --git a/src/components/forms/customers/CreateCustomer.tsx b/src/components/forms/customers/CreateCustomer.tsx
index e2ebb6b..e54ed6e 100644
--- a/src/components/forms/customers/CreateCustomer.tsx
+++ b/src/components/forms/customers/CreateCustomer.tsx
@@ -35,7 +35,7 @@ const CreateCustomer = ({ defaultValues, editMode, id }: IProps) => {
     <form className="grid grid-cols-1 gap-9" onSubmit={handleSubmit(onSubmit)}>
       <ShowcaseSection
         title="Create Customer"
-        className="grid grid-cols-2 gap-5"
+        className="grid grid-cols-1 gap-5 md:grid-cols-2"
       >
         <div className="flex flex-col gap-2">
           <InputGroup
@@ -228,7 +228,9 @@ const CreateCustomer = ({ defaultValues, editMode, id }: IProps) => {
           )}
         </div>
 
-        <FormFooter />
+        <div className="md:col-span-2">
+          <FormFooter />
+        </div>
       </ShowcaseSection>
     </form>
   );
diff --git a/src/components/forms/notifications/CreateNotification.tsx b/src/components/forms/notifications/CreateNotification.tsx
index 37c9ff2..14a819d 100644
--- a/src/components/forms/notifications/CreateNotification.tsx
+++ b/src/components/forms/notifications/CreateNotification.tsx
@@ -28,7 +28,7 @@ const CreateNotificationForm = () => {
     <form onSubmit={handleSubmit(onSubmit)}>
       <ShowcaseSection
         title="Create Notification"
-        className="grid grid-cols-2 gap-5"
+        className="grid grid-cols-1 gap-5 md:grid-cols-2"
       >
         <div className="flex flex-col gap-2">
           <InputGroup
@@ -151,7 +151,7 @@ const CreateNotificationForm = () => {
             <p className="mt-1 text-sm text-red-500">{errors.type.message}</p>
           )}
         </div>
-        <div className="col-span-2 flex flex-col gap-2">
+        <div className="flex flex-col gap-2 md:col-span-2">
           <TextAreaGroup
             required
             {...register("description", {
@@ -165,7 +165,9 @@ const CreateNotificationForm = () => {
             placeholder="Enter description"
           />
         </div>
-        <FormFooter />
+        <div className="md:col-span-2">
+          <FormFooter />
+        </div>
       </ShowcaseSection>
     </form>
   );
diff --git a/src/components/ui/FormFooter.tsx b/src/components/ui/FormFooter.tsx
index 9fb12c2..49cb6b9 100644
--- a/src/components/ui/FormFooter.tsx
+++ b/src/components/ui/FormFooter.tsx
@@ -10,7 +10,7 @@ const FormFooter = ({ onCancel }: IProps) => {
   const isMutating = useIsMutating();
   const router = useRouter();
   return (
-    <div className="col-span-2 flex gap-6">
+    <div className="col-span-1 flex gap-6 md:col-span-2">
       <button
         type="submit"
         disabled={isMutating > 0}
diff --git a/src/components/ui/ListHeader.tsx b/src/components/ui/ListHeader.tsx
index adfa251..29236b8 100644
--- a/src/components/ui/ListHeader.tsx
+++ b/src/components/ui/ListHeader.tsx
@@ -21,7 +21,7 @@ const ListHeader = ({
 }: IProps) => {
   const pathName = usePathname();
   return (
-    <div className="flex items-center justify-between">
+    <div className="flex flex-col-reverse items-center justify-between md:flex-row">
       <IsVisible condition={hasFilter}>
         <button
           onClick={onFilter}
@@ -34,7 +34,7 @@ const ListHeader = ({
         </button>
       </IsVisible>
       <IsVisible condition={hasCreate}>
-        <button className="mb-5 flex w-fit justify-center self-end rounded-lg bg-primary p-[13px] font-medium text-white hover:bg-opacity-90">
+        <button className="mb-5 flex w-fit justify-center self-end rounded-2xl bg-primary p-3 font-medium text-white hover:bg-opacity-90">
           <Link href={`${pathName}/create`}>{createButtonText}</Link>
         </button>
       </IsVisible>