From 757429afe6e0b0181e24d156f60456fc1fd8865d Mon Sep 17 00:00:00 2001
From: GoHorse Deploy <deploy@gohorse.com>
Date: Sat, 7 Mar 2026 10:53:07 -0300
Subject: [PATCH] UI: Add margin between label and input on job posting form

---
 frontend/src/app/jobs/new/page.tsx | 76 +++++++++++++++---------------
 1 file changed, 38 insertions(+), 38 deletions(-)

diff --git a/frontend/src/app/jobs/new/page.tsx b/frontend/src/app/jobs/new/page.tsx
index fa6dc03..13793cb 100644
--- a/frontend/src/app/jobs/new/page.tsx
+++ b/frontend/src/app/jobs/new/page.tsx
@@ -935,7 +935,7 @@ export default function PostJobPage() {
               {step === 1 && (
                 <div className="mt-8 space-y-6">
                   <div>
-                    <Label>{c.labels.jobTitle}</Label>
+                    <Label className="mb-2 block">{c.labels.jobTitle}</Label>
                     <Input
                       maxLength={65}
                       placeholder={c.labels.jobTitlePlaceholder}
@@ -949,7 +949,7 @@ export default function PostJobPage() {
 
                   <div className="grid md:grid-cols-[1fr_auto] gap-4 items-end">
                     <div>
-                      <Label>{c.labels.location}</Label>
+                      <Label className="mb-2 block">{c.labels.location}</Label>
                       <div ref={locationRef} className="relative">
                         <Input
                           placeholder={c.labels.locationPlaceholder}
@@ -1011,7 +1011,7 @@ export default function PostJobPage() {
 
                   {job.useCepSearch && (
                     <div>
-                      <Label>CEP</Label>
+                      <Label className="mb-2 block">CEP</Label>
                       <Input
                         placeholder="00000-000"
                         value={job.cep}
@@ -1022,7 +1022,7 @@ export default function PostJobPage() {
 
                   <div className="grid md:grid-cols-3 gap-4">
                     <div>
-                      <Label>{c.labels.country}</Label>
+                      <Label className="mb-2 block">{c.labels.country}</Label>
                       <select
                         className="w-full px-3 py-2 border rounded-md bg-white"
                         value={job.country}
@@ -1035,7 +1035,7 @@ export default function PostJobPage() {
                       </select>
                     </div>
                     <div>
-                      <Label>{c.labels.contractType}</Label>
+                      <Label className="mb-2 block">{c.labels.contractType}</Label>
                       <select
                         className="w-full px-3 py-2 border rounded-md bg-white"
                         value={job.contractType}
@@ -1050,7 +1050,7 @@ export default function PostJobPage() {
                       </select>
                     </div>
                     <div>
-                      <Label>{c.labels.workingHours}</Label>
+                      <Label className="mb-2 block">{c.labels.workingHours}</Label>
                       <select
                         className="w-full px-3 py-2 border rounded-md bg-white"
                         value={job.workingHours}
@@ -1064,10 +1064,10 @@ export default function PostJobPage() {
                   </div>
 
                   <div className="space-y-3">
-                    <Label>{c.labels.salary}</Label>
+                    <Label className="mb-2 block">{c.labels.salary}</Label>
                     <div className="grid md:grid-cols-4 gap-4">
                       <div>
-                        <Label className="text-xs">{c.labels.salaryMode}</Label>
+                        <Label className="mb-2 block text-xs">{c.labels.salaryMode}</Label>
                         <select
                           className="w-full px-3 py-2 border rounded-md bg-white"
                           value={job.salaryMode}
@@ -1079,7 +1079,7 @@ export default function PostJobPage() {
                       </div>
 
                       <div>
-                        <Label className="text-xs">{c.labels.currency}</Label>
+                        <Label className="mb-2 block text-xs">{c.labels.currency}</Label>
                         <select
                           className="w-full px-3 py-2 border rounded-md bg-white"
                           value={job.currency}
@@ -1092,7 +1092,7 @@ export default function PostJobPage() {
                       </div>
 
                       <div>
-                        <Label className="text-xs">{c.labels.period}</Label>
+                        <Label className="mb-2 block text-xs">{c.labels.period}</Label>
                         <select
                           className="w-full px-3 py-2 border rounded-md bg-white"
                           value={job.salaryPeriod}
@@ -1108,7 +1108,7 @@ export default function PostJobPage() {
 
                       {job.salaryMode === "fixed" ? (
                         <div>
-                          <Label className="text-xs">{c.labels.salaryValue}</Label>
+                          <Label className="mb-2 block text-xs">{c.labels.salaryValue}</Label>
                           <Input
                             type="number"
                             placeholder="Ex: 5000"
@@ -1119,7 +1119,7 @@ export default function PostJobPage() {
                       ) : (
                         <div className="grid grid-cols-2 gap-2">
                           <div>
-                            <Label className="text-xs">{c.labels.salaryMin}</Label>
+                            <Label className="mb-2 block text-xs">{c.labels.salaryMin}</Label>
                             <Input
                               type="number"
                               placeholder="1000"
@@ -1128,7 +1128,7 @@ export default function PostJobPage() {
                             />
                           </div>
                           <div>
-                            <Label className="text-xs">{c.labels.salaryMax}</Label>
+                            <Label className="mb-2 block text-xs">{c.labels.salaryMax}</Label>
                             <Input
                               type="number"
                               placeholder="2000"
@@ -1142,7 +1142,7 @@ export default function PostJobPage() {
                   </div>
 
                   <div>
-                    <Label>{c.labels.description}</Label>
+                    <Label className="mb-2 block">{c.labels.description}</Label>
                     <RichTextEditor
                       value={job.description}
                       onChange={(value) => setJob({ ...job, description: value })}
@@ -1165,7 +1165,7 @@ export default function PostJobPage() {
 
                     <div className="grid md:grid-cols-2 gap-4">
                       <div>
-                        <Label>{c.labels.companyName}</Label>
+                        <Label className="mb-2 block">{c.labels.companyName}</Label>
                         <Input
                           placeholder={c.labels.companyNamePlaceholder}
                           value={company.name}
@@ -1173,7 +1173,7 @@ export default function PostJobPage() {
                         />
                       </div>
                       <div>
-                        <Label>{c.labels.companyWebsite}</Label>
+                        <Label className="mb-2 block">{c.labels.companyWebsite}</Label>
                         <Input
                           placeholder={c.labels.companyWebsitePlaceholder}
                           value={company.website}
@@ -1184,7 +1184,7 @@ export default function PostJobPage() {
 
                     <div className="grid md:grid-cols-3 gap-4">
                       <div>
-                        <Label>{c.labels.employeeCount}</Label>
+                        <Label className="mb-2 block">{c.labels.employeeCount}</Label>
                         <select
                           className="w-full px-3 py-2 border rounded-md bg-white"
                           value={company.employeeCount}
@@ -1203,7 +1203,7 @@ export default function PostJobPage() {
                         </select>
                       </div>
                       <div>
-                        <Label>{c.labels.foundedYear}</Label>
+                        <Label className="mb-2 block">{c.labels.foundedYear}</Label>
                         <Input
                           type="number"
                           min="1800"
@@ -1214,7 +1214,7 @@ export default function PostJobPage() {
                         />
                       </div>
                       <div>
-                        <Label>{c.labels.cnpj}</Label>
+                        <Label className="mb-2 block">{c.labels.cnpj}</Label>
                         <Input
                           placeholder={c.labels.cnpjPlaceholder}
                           value={company.document}
@@ -1224,7 +1224,7 @@ export default function PostJobPage() {
                     </div>
 
                     <div>
-                      <Label>{c.labels.companyDescription}</Label>
+                      <Label className="mb-2 block">{c.labels.companyDescription}</Label>
                       <RichTextEditor
                         value={company.description}
                         onChange={(value) => setCompany({ ...company, description: value })}
@@ -1236,7 +1236,7 @@ export default function PostJobPage() {
 
                   <div className="grid md:grid-cols-2 gap-4">
                     <div>
-                      <Label>{c.labels.applicationChannel}</Label>
+                      <Label className="mb-2 block">{c.labels.applicationChannel}</Label>
                       <select
                         className="w-full px-3 py-2 border rounded-md bg-white"
                         value={job.applicationChannel}
@@ -1248,7 +1248,7 @@ export default function PostJobPage() {
                       </select>
                     </div>
                     <div>
-                      <Label>{c.labels.resumeRequirement}</Label>
+                      <Label className="mb-2 block">{c.labels.resumeRequirement}</Label>
                       <select
                         className="w-full px-3 py-2 border rounded-md bg-white"
                         value={job.resumeRequirement}
@@ -1263,7 +1263,7 @@ export default function PostJobPage() {
 
                   {job.applicationChannel === "email" && (
                     <div>
-                      <Label>{c.labels.applicationEmail}</Label>
+                      <Label className="mb-2 block">{c.labels.applicationEmail}</Label>
                       <Input
                         type="email"
                         placeholder={c.labels.applicationEmailPlaceholder}
@@ -1275,7 +1275,7 @@ export default function PostJobPage() {
 
                   {job.applicationChannel === "url" && (
                     <div>
-                      <Label>{c.labels.applicationUrl}</Label>
+                      <Label className="mb-2 block">{c.labels.applicationUrl}</Label>
                       <Input
                         placeholder={c.labels.applicationUrlPlaceholder}
                         value={job.applicationUrl}
@@ -1286,7 +1286,7 @@ export default function PostJobPage() {
 
                   {job.applicationChannel === "phone" && (
                     <div>
-                      <Label>{c.labels.applicationPhone}</Label>
+                      <Label className="mb-2 block">{c.labels.applicationPhone}</Label>
                       <Input
                         placeholder={c.labels.applicationPhonePlaceholder}
                         value={job.applicationPhone}
@@ -1296,7 +1296,7 @@ export default function PostJobPage() {
                   )}
 
                   <div>
-                    <Label>{c.languageLabel}</Label>
+                    <Label className="mb-2 block">{c.languageLabel}</Label>
                     <select
                       className="w-full px-3 py-2 border rounded-md bg-white"
                       value={job.descriptionLanguage}
@@ -1337,7 +1337,7 @@ export default function PostJobPage() {
                 <div className="mt-8 space-y-6">
                   <div className="grid md:grid-cols-2 gap-4">
                     <div>
-                      <Label>{c.billing.fiscalType}</Label>
+                      <Label className="mb-2 block">{c.billing.fiscalType}</Label>
                       <select
                         className="w-full px-3 py-2 border rounded-md bg-white"
                         value={billing.legalType}
@@ -1348,7 +1348,7 @@ export default function PostJobPage() {
                       </select>
                     </div>
                     <div>
-                      <Label>{c.billing.fiscalDocument}</Label>
+                      <Label className="mb-2 block">{c.billing.fiscalDocument}</Label>
                       <Input
                         placeholder={billing.legalType === "company" ? c.billing.cnpjLabel : c.billing.cpfLabel}
                         value={billing.document}
@@ -1359,7 +1359,7 @@ export default function PostJobPage() {
 
                   <div className="grid md:grid-cols-2 gap-4">
                     <div>
-                      <Label>{c.billing.billingCountry}</Label>
+                      <Label className="mb-2 block">{c.billing.billingCountry}</Label>
                       <select
                         className="w-full px-3 py-2 border rounded-md bg-white"
                         value={billing.billingCountry}
@@ -1372,7 +1372,7 @@ export default function PostJobPage() {
                       </select>
                     </div>
                     <div>
-                      <Label>{c.billing.billingEmail}</Label>
+                      <Label className="mb-2 block">{c.billing.billingEmail}</Label>
                       <Input
                         type="email"
                         placeholder={c.billing.billingEmailPlaceholder}
@@ -1389,7 +1389,7 @@ export default function PostJobPage() {
                     </div>
                     <div className="grid md:grid-cols-2 gap-4">
                       <div>
-                        <Label>{c.billing.password}</Label>
+                        <Label className="mb-2 block">{c.billing.password}</Label>
                         <Input
                           type="password"
                           placeholder={c.billing.passwordPlaceholder}
@@ -1398,7 +1398,7 @@ export default function PostJobPage() {
                         />
                       </div>
                       <div>
-                        <Label>{c.billing.confirmPassword}</Label>
+                        <Label className="mb-2 block">{c.billing.confirmPassword}</Label>
                         <Input
                           type="password"
                           placeholder={c.billing.confirmPasswordPlaceholder}
@@ -1410,7 +1410,7 @@ export default function PostJobPage() {
                   </div>
 
                   <div>
-                    <Label>{c.billing.billingAddress}</Label>
+                    <Label className="mb-2 block">{c.billing.billingAddress}</Label>
                     <textarea
                       className="w-full px-3 py-2 border rounded-md bg-white min-h-[96px]"
                       placeholder={c.billing.billingAddressPlaceholder}
@@ -1421,7 +1421,7 @@ export default function PostJobPage() {
 
                   <div className="grid md:grid-cols-2 gap-4">
                     <div>
-                      <Label>{c.billing.contactName}</Label>
+                      <Label className="mb-2 block">{c.billing.contactName}</Label>
                       <Input
                         placeholder={c.billing.contactNamePlaceholder}
                         value={billing.contactName}
@@ -1429,7 +1429,7 @@ export default function PostJobPage() {
                       />
                     </div>
                     <div>
-                      <Label>{c.billing.contactLastName}</Label>
+                      <Label className="mb-2 block">{c.billing.contactLastName}</Label>
                       <Input
                         placeholder={c.billing.contactLastNamePlaceholder}
                         value={billing.contactLastName}
@@ -1440,7 +1440,7 @@ export default function PostJobPage() {
 
                   <div className="grid md:grid-cols-2 gap-4">
                     <div>
-                      <Label>{c.billing.phone}</Label>
+                      <Label className="mb-2 block">{c.billing.phone}</Label>
                       <Input
                         placeholder={c.billing.phonePlaceholder}
                         value={billing.contactPhone}
@@ -1448,7 +1448,7 @@ export default function PostJobPage() {
                       />
                     </div>
                     <div>
-                      <Label>{c.billing.mobile}</Label>
+                      <Label className="mb-2 block">{c.billing.mobile}</Label>
                       <Input
                         placeholder={c.billing.mobilePlaceholder}
                         value={billing.contactMobile}
@@ -1485,7 +1485,7 @@ export default function PostJobPage() {
               {step === 4 && (
                 <div className="mt-8 space-y-6">
                   <div>
-                    <Label>{c.payment.method}</Label>
+                    <Label className="mb-2 block">{c.payment.method}</Label>
                     <select
                       className="w-full px-3 py-2 border rounded-md bg-white"
                       value={paymentMethod}