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

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

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

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

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

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

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}

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>