improved error message readability

ui/src/components/application/ApplicationForm.vue

@@ -20,18 +20,18 @@ import { ApplicationData } from '@/api/application';
 
 const formSchema = toTypedSchema(z.object({
   dob: z.string().refine(v => v, { message: "A date of birth is required." }),
-  name: z.string(),
+  name: z.string().nonempty(),
   playtime: z.coerce.number({ invalid_type_error: "Must be a number", }).min(0, "Cannot be less than 0"),
-  hobbies: z.string(),
+  hobbies: z.string().nonempty(),
   military: z.boolean(),
-  communities: z.string(),
-  joinReason: z.string(),
-  milsimAttraction: z.string(),
-  referral: z.string(),
-  steamProfile: z.string(),
-  timezone: z.string(),
+  communities: z.string().nonempty(),
+  joinReason: z.string().nonempty(),
+  milsimAttraction: z.string().nonempty(),
+  referral: z.string().nonempty(),
+  steamProfile: z.string().nonempty(),
+  timezone: z.string().nonempty(),
   canAttendSaturday: z.boolean(),
-  interests: z.string(),
+  interests: z.string().nonempty(),
   aknowledgeRules: z.literal(true, {
     errorMap: () => ({ message: "Required" })
   }),
@@ -82,7 +82,9 @@ onMounted(() => {
         <FormControl>
           <DateInput :model-value="(value as string) ?? ''" :disabled="readOnly" @update:model-value="handleChange" />
         </FormControl>
-        <FormMessage />
+        <div class="h-4">
+          <FormMessage class="text-destructive" />
+        </div>
       </FormItem>
     </FormField>
 
@@ -94,7 +96,9 @@ onMounted(() => {
         <FormControl>
           <Input :model-value="value" @update:model-value="handleChange" :disabled="readOnly" />
         </FormControl>
-        <FormMessage />
+        <div class="h-4">
+          <FormMessage class="text-destructive" />
+        </div>
       </FormItem>
     </FormField>
 
@@ -105,7 +109,9 @@ onMounted(() => {
         <FormControl>
           <Input type="number" :model-value="value" @update:model-value="handleChange" :disabled="readOnly" />
         </FormControl>
-        <FormMessage />
+        <div class="h-4">
+          <FormMessage class="text-destructive" />
+        </div>
       </FormItem>
     </FormField>
 
@@ -117,7 +123,9 @@ onMounted(() => {
           <Textarea rows="4" class="resize-none" :model-value="value" @update:model-value="handleChange"
             :disabled="readOnly" />
         </FormControl>
-        <FormMessage />
+        <div class="h-4">
+          <FormMessage class="text-destructive" />
+        </div>
       </FormItem>
     </FormField>
 
@@ -131,7 +139,9 @@ onMounted(() => {
             <span>Yes (checked) / No (unchecked)</span>
           </div>
         </FormControl>
-        <FormMessage />
+        <div class="h-4">
+          <FormMessage class="text-destructive" />
+        </div>
       </FormItem>
     </FormField>
 
@@ -142,7 +152,9 @@ onMounted(() => {
         <FormControl>
           <Input :model-value="value" @update:model-value="handleChange" :disabled="readOnly" />
         </FormControl>
-        <FormMessage />
+        <div class="h-4">
+          <FormMessage class="text-destructive" />
+        </div>
       </FormItem>
     </FormField>
 
@@ -154,7 +166,9 @@ onMounted(() => {
           <Textarea rows="4" class="resize-none" :model-value="value" @update:model-value="handleChange"
             :disabled="readOnly" />
         </FormControl>
-        <FormMessage />
+        <div class="h-4">
+          <FormMessage class="text-destructive" />
+        </div>
       </FormItem>
     </FormField>
 
@@ -166,7 +180,9 @@ onMounted(() => {
           <Textarea rows="4" class="resize-none" :model-value="value" @update:model-value="handleChange"
             :disabled="readOnly" />
         </FormControl>
-        <FormMessage />
+        <div class="h-4">
+          <FormMessage class="text-destructive" />
+        </div>
       </FormItem>
     </FormField>
 
@@ -178,7 +194,9 @@ onMounted(() => {
           <Input placeholder="e.g., Reddit / Member: Alice" :model-value="value" @update:model-value="handleChange"
             :disabled="readOnly" />
         </FormControl>
-        <FormMessage />
+        <div class="h-4">
+          <FormMessage class="text-destructive" />
+        </div>
       </FormItem>
     </FormField>
 
@@ -194,7 +212,9 @@ onMounted(() => {
           <Input type="url" placeholder="https://steamcommunity.com/profiles/7656119..." :model-value="value"
             @update:model-value="handleChange" :disabled="readOnly" />
         </FormControl>
-        <FormMessage />
+        <div class="h-4">
+          <FormMessage class="text-destructive" />
+        </div>
       </FormItem>
     </FormField>
 
@@ -206,7 +226,9 @@ onMounted(() => {
           <Input placeholder="e.g., AEST, EST, UTC+10" :model-value="value" @update:model-value="handleChange"
             :disabled="readOnly" />
         </FormControl>
-        <FormMessage />
+        <div class="h-4">
+          <FormMessage class="text-destructive" />
+        </div>
       </FormItem>
     </FormField>
 
@@ -220,7 +242,9 @@ onMounted(() => {
             <span>Yes (checked) / No (unchecked)</span>
           </div>
         </FormControl>
-        <FormMessage />
+        <div class="h-4">
+          <FormMessage class="text-destructive" />
+        </div>
       </FormItem>
     </FormField>
 
@@ -232,7 +256,9 @@ onMounted(() => {
           <Input placeholder="e.g., Rifleman; Medic; Pilot" :model-value="value" @update:model-value="handleChange"
             :disabled="readOnly" />
         </FormControl>
-        <FormMessage />
+        <div class="h-4">
+          <FormMessage class="text-destructive" />
+        </div>
       </FormItem>
     </FormField>
 
@@ -243,11 +269,13 @@ onMounted(() => {
         <FormControl>
           <div class="flex items-center gap-2">
             <Checkbox :model-value="value" @update:model-value="handleChange" :disabled="readOnly" />
-            <span>By checking this box, you accept the <Button variant="link" class="p-0">Code of
+            <span>By checking this box, you accept the <Button variant="link" class="p-0 h-min">Code of
                 Conduct</Button>.</span>
           </div>
         </FormControl>
-        <FormMessage />
+        <div class="h-4">
+          <FormMessage class="text-destructive" />
+        </div>
       </FormItem>
     </FormField>
 

ui/src/pages/Application.vue

@@ -162,7 +162,7 @@ async function handleDeny(id) {
         <div v-else class="flex flex-row justify-between items-center py-2 mb-8">
             <h3 class="scroll-m-20 text-2xl font-semibold tracking-tight">Apply to join the 17th Rangers</h3>
         </div>
-        <ApplicationForm :read-only="readOnly" :data="appData" @submit="(e) => { postApp(e) }" class="mb-7">
+        <ApplicationForm :read-only="readOnly" :data="appData" @submit="(e) => { postApp(e) }" class="mb-7 pb-15">
         </ApplicationForm>
         <div v-if="!newApp">
             <h3 class="scroll-m-20 text-2xl font-semibold tracking-tight mb-4">Discussion</h3>