Added responsiveness create post (#407)

* Update page.tsx * Update layout.tsx * Update job-form.tsx
code100x · Sep 27, 2024 · 9a676d5 · 9a676d5
1 parent 1d4aa59
commit 9a676d5
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 10 deletions.
diff --git 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">

diff --git 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 */}

diff --git a/src/components/job-form.tsx b/src/components/job-form.tsx
@@ -159,32 +159,32 @@ 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">
             300,000<span className="text-blue-500">+</span>
           </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>
@@ -206,7 +206,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"
@@ -437,7 +437,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}