feat(form): enhance error message positioning and update form field styling in FormInput and FormSelect components

Author: AmirhoseinBrz

web/src/components/form/form-input.tsx

@@ -2,6 +2,7 @@ import * as Form from '@radix-ui/react-form';
 import { useFormContext } from 'react-hook-form';
 import { FormFieldProps } from '../../types/form.types';
 import { getNestedValue } from '@/lib/helper';
+import { cn } from '@/lib/utils';
 
 export const FormInput = ({ name, label, error, ...props }: FormFieldProps) => {
   const {
@@ -13,7 +14,12 @@ export const FormInput = ({ name, label, error, ...props }: FormFieldProps) => {
   const errorMessage = fieldError?.message as string;
 
   return (
-    <Form.Field className="form-field" name={name}>
+    <Form.Field
+      className={cn('form-field relative', {
+        'mb-6': errorMessage,
+      })}
+      name={name}
+    >
       {label && (
         <div className="mb-2 flex items-baseline justify-between">
           <Form.Label className="form-label">{label} :</Form.Label>
@@ -27,9 +33,11 @@ export const FormInput = ({ name, label, error, ...props }: FormFieldProps) => {
         />
       </Form.Control>
       {errorMessage && (
-        <Form.Message className="form-message ml-auto text-sm text-red-500">
-          {errorMessage}
-        </Form.Message>
+        <div className="absolute left-0 top-full">
+          <Form.Message className="form-message ml-auto text-sm text-red-500">
+            {errorMessage}
+          </Form.Message>
+        </div>
       )}
     </Form.Field>
   );

web/src/components/form/form-select.tsx

@@ -6,6 +6,7 @@ import Select from 'react-select';
 import { getNestedValue } from '@/lib/helper';
 import { selectStyle } from '@/pages/helm-template/styles/helm-template.style';
 import { useStyle } from '@/hooks';
+import { cn } from '@/lib/utils';
 
 interface OptionType {
   value: string;
@@ -38,7 +39,12 @@ export const FormSelect = ({
   const errorMessage = fieldError?.message as string;
 
   return (
-    <Form.Field className="form-field" name={name}>
+    <Form.Field
+      className={cn('form-field relative', {
+        'mb-6': errorMessage,
+      })}
+      name={name}
+    >
       {label && (
         <div className="mb-2 flex items-baseline justify-between">
           <Form.Label className="form-label">{label} :</Form.Label>
@@ -61,9 +67,11 @@ export const FormSelect = ({
         />
       </Form.Control>
       {errorMessage && (
-        <Form.Message className="form-message mt-1 text-red-500">
-          {errorMessage}
-        </Form.Message>
+        <div className="absolute left-0 top-full">
+          <Form.Message className="form-message ml-auto text-sm text-red-500">
+            {errorMessage}
+          </Form.Message>
+        </div>
       )}
     </Form.Field>
   );

web/src/pages/helm-template/helm-template.tsx

@@ -97,7 +97,7 @@ const HelmTemplate: FC = () => {
       });
 
       const body: HelmTemplateBody = {
-        api_version: data.api_version,
+        api_version: parseInt(data.api_version),
         pods: body_data,
       };
 
@@ -320,7 +320,7 @@ export const PodEnvironmentFields: React.FC<PodEnvironmentFieldsProps> = ({
       <div className="grid grid-cols-2 gap-4">
         {fields.map((field, envIdx) => (
           <div
-            className="flex items-center divide-x divide-gray-200 rounded-md border border-gray-200 dark:divide-gray-500 dark:border-gray-500"
+            className="flex items-center divide-x divide-gray-200 rounded-md border border-gray-200 dark:divide-gray-500 dark:border-gray-500 [&>div]:mb-0"
             key={field.id}
           >
             <FormInput