From 0c4f4303ef396185f5afc1c1dc6a7227ddd08bfa Mon Sep 17 00:00:00 2001
From: Yiwahpsp <Patsaporn.Kaewkong@gmail.com>
Date: Tue, 29 Oct 2024 15:15:52 +0700
Subject: [PATCH] fix: layout form, error input comp, font size

---
 src/app/form/[id]/page.tsx            |  2 +-
 src/components/form/form-question.tsx | 11 ++++++-----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/app/form/[id]/page.tsx b/src/app/form/[id]/page.tsx
index cad6224..a3d6dd8 100644
--- a/src/app/form/[id]/page.tsx
+++ b/src/app/form/[id]/page.tsx
@@ -45,7 +45,7 @@ export default function Page({ params: { id } }: PageProps) {
   }
 
   return (
-    <div className='flex w-full flex-col items-center justify-center space-y-4 pb-6'>
+    <div className='flex w-full flex-col items-center justify-center space-y-4 px-5 pb-6'>
       <Toaster position='top-center' reverseOrder={false} />
       <FormHeader form={form} />
       <FormContainer>
diff --git a/src/components/form/form-question.tsx b/src/components/form/form-question.tsx
index 85f74da..f2222d8 100644
--- a/src/components/form/form-question.tsx
+++ b/src/components/form/form-question.tsx
@@ -8,11 +8,11 @@ export function FormQuestion({ column }: { column: FormColumn }) {
   return (
     <div className='flex w-full flex-col items-start justify-start gap-2.5'>
       <div className='flex flex-col'>
-        <h3 className='text-header-1 font-bold text-neutral-900'>
+        <h3 className='flex text-subtitle font-bold text-neutral-900'>
           {column.label}
-          {column.required ? <span className='text-red-500'> *</span> : null}
+          {column.required ? <p className='text-red-500'>*</p> : null}
         </h3>
-        <p className='text-subtitle font-light text-gray-600'>
+        <p className='text-body-1 font-light text-gray-600'>
           {column.description}
         </p>
       </div>
@@ -46,6 +46,7 @@ export function FormQuestion({ column }: { column: FormColumn }) {
               type='checkbox'
               name={column.columnName}
               required={column.required}
+              className='size-4 rounded-md'
               onInvalid={(e) => {
                 e.preventDefault()
                 ;(
@@ -59,7 +60,7 @@ export function FormQuestion({ column }: { column: FormColumn }) {
                 ).nextElementSibling?.classList.add('hidden')
               }}
             />
-            <p className='absolute -bottom-8 my-2 hidden w-full text-body-2 italic text-red-600'>
+            <p className='absolute -bottom-10 my-2 hidden w-full text-body-2 italic text-red-600'>
               จำเป็นต้องยอมรับ
             </p>
           </label>
@@ -94,7 +95,7 @@ export function FormQuestion({ column }: { column: FormColumn }) {
               </option>
             ))}
           </select>
-          <p className='absolute -bottom-8 my-2 hidden w-full text-body-2 italic text-red-600'>
+          <p className='absolute -bottom-10 my-2 hidden w-full text-body-2 italic text-red-600'>
             จำเป็นต้องเลือก
           </p>
         </div>