From 44aeea4b20238eb50213d2dfa854371b5eecc5c4 Mon Sep 17 00:00:00 2001
From: Meer Uzair <121447358+MeerUzairWasHere@users.noreply.github.com>
Date: Wed, 25 Sep 2024 20:28:20 +0530
Subject: [PATCH 1/3] Update page.tsx

---
 src/app/create/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/create/page.tsx b/src/app/create/page.tsx
index a7b678cb..428dad04 100644
--- a/src/app/create/page.tsx
+++ b/src/app/create/page.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 
 const page = () => {
   return (
-    <div className="mt-10 min-w-full">
+    <div className="mt-10 flex flex-col items-center">
       <div>
         <h1 className="text-center text-4xl font-semibold">Post a job</h1>
         <p className="text-center mt-6 text-lg text-gray-300">

From 55561b7a0bd3cc7164c823531b43ad64d56b0d50 Mon Sep 17 00:00:00 2001
From: Meer Uzair <121447358+MeerUzairWasHere@users.noreply.github.com>
Date: Wed, 25 Sep 2024 20:28:56 +0530
Subject: [PATCH 2/3] Update layout.tsx

---
 src/app/layout.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 890387dc..9fc68b7f 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -35,7 +35,7 @@ export default async function RootLayout({
       >
         <Providers>
           <Header />
-          <main className="grow grid">{children}</main>
+          <main className="grow grid p-4">{children}</main>
           <Footer />
         </Providers>
         {/* Commenting this out for temp basis */}

From 8def3ff82077826315e0c01eecc665ace410078a Mon Sep 17 00:00:00 2001
From: Meer Uzair <121447358+MeerUzairWasHere@users.noreply.github.com>
Date: Wed, 25 Sep 2024 20:36:53 +0530
Subject: [PATCH 3/3] Update job-form.tsx

---
 src/components/job-form.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/job-form.tsx b/src/components/job-form.tsx
index bb167f51..32b8cbf4 100644
--- a/src/components/job-form.tsx
+++ b/src/components/job-form.tsx
@@ -153,20 +153,20 @@ const PostJobForm = () => {
   }, [watchHasSalaryRange, form]);
   return (
     <div className="flex flex-col items-center gap-y-10 justify-center">
-      <div className=" mt-4 flex gap-2 ">
-        <div className="bg-gray-800/90 backdrop-blur-sm p-4 rounded-lg text-center text-white flex-1 sm:min-w-[12rem]">
+      <div className="w-full md:justify-center mt-4 flex flex-col md:flex-row gap-2">
+        <div className="bg-gray-800/90 backdrop-blur-sm p-4 rounded-lg text-center text-white w-full md:w-48">
           <Calendar className="w-8 h-8 mb-3 mx-auto text-green-500" />
           <p className="text-base font-semibold mb-1">Posted for</p>
           <p className="text-gray-400 text-sm">30 days</p>
         </div>
 
-        <div className="bg-gray-800/90 backdrop-blur-sm p-4 rounded-lg text-center text-white flex-1 sm:min-w-[12rem]">
+        <div className="bg-gray-800/90 backdrop-blur-sm p-4 rounded-lg text-center text-white w-full md:w-48">
           <MailOpenIcon className="w-8 h-8 mb-3 mx-auto text-purple-500" />
           <p className="text-base font-semibold mb-1">Emailed to</p>
           <p className="text-gray-400 text-sm">290,301 subscribers</p>
         </div>
 
-        <div className="bg-gray-800/90 backdrop-blur-sm p-4 rounded-lg text-center text-white flex-1 sm:min-w-[12rem]">
+        <div className="bg-gray-800/90 backdrop-blur-sm p-4 rounded-lg text-center text-white w-full md:w-48">
           <LucideRocket className="w-8 h-8 mb-3 mx-auto text-orange-500" />
           <p className="text-base font-semibold mb-1">Reach</p>
           <p className="text-gray-400 text-sm">
@@ -174,11 +174,11 @@ const PostJobForm = () => {
           </p>
         </div>
       </div>
-      <div className="flex-col  justify-center">
+      <div className="flex-col justify-center">
         <Form {...form}>
           <form
             onSubmit={form.handleSubmit(handleFormSubmit)}
-            className="flex flex-col max-w-full max-sm:p-2 "
+            className="flex flex-col max-w-full"
           >
             <div className="bg-gray-900 w-full  text-gray-300 p-6 rounded-lg space-y-4">
               <h2 className="text-2xl font-semibold mb-6">Job details</h2>
@@ -200,7 +200,7 @@ const PostJobForm = () => {
                 )}
               />
 
-              <div className="grid grid-cols-2 gap-4">
+              <div className="grid grid-cols md:grid-cols-2 gap-4">
                 <FormField
                   control={form.control}
                   name="category"
@@ -427,7 +427,7 @@ const PostJobForm = () => {
               </div>
 
               {/* Company Name and Email Fields */}
-              <div className="flex gap-4 mb-4">
+              <div className="flex flex-col md:flex-row gap-4 mb-4">
                 <div className="flex-1">
                   <FormField
                     control={form.control}