From 24ee55131e4e7192c0063e8f2778e5f0194317d2 Mon Sep 17 00:00:00 2001
From: Riccardo <riccardo.s@hey.com>
Date: Sun, 17 Dec 2023 21:03:41 +0100
Subject: [PATCH] fix: keep input elements aligned when displaying error
 message

---
 app/page.tsx             | 44 ++++++++++++++++++++++------------------
 app/unsubscribe/page.tsx | 44 ++++++++++++++++++++++------------------
 components/ui/form.tsx   | 27 ++++++++++++------------
 3 files changed, 62 insertions(+), 53 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 760786a..1810331 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -80,26 +80,30 @@ export default function Home() {
     }
 
     return (
-      <Form {...form}>
-        <form
-          onSubmit={form.handleSubmit(handleSubmit)}
-          className='flex items-center justify-center space-x-4'
-        >
-          <FormField
-            control={form.control}
-            name='email'
-            render={({ field }) => (
-              <FormItem>
-                <FormControl>
-                  <Input placeholder='example@example.com' {...field} />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-          <Button type='submit'>Submit</Button>
-        </form>
-      </Form>
+      <div className='h-12 align-top'>
+        <Form {...form}>
+          <form
+            onSubmit={form.handleSubmit(handleSubmit)}
+            className='flex space-x-4'
+          >
+            <FormField
+              control={form.control}
+              name='email'
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <Input placeholder='example@example.com' {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <div className='align-top'>
+              <Button type='submit'>Submit</Button>
+            </div>
+          </form>
+        </Form>
+      </div>
     );
   }
 
diff --git a/app/unsubscribe/page.tsx b/app/unsubscribe/page.tsx
index 88563fa..47f469d 100644
--- a/app/unsubscribe/page.tsx
+++ b/app/unsubscribe/page.tsx
@@ -80,26 +80,30 @@ export default function Unsubscribe() {
     }
 
     return (
-      <Form {...form}>
-        <form
-          onSubmit={form.handleSubmit(handleSubmit)}
-          className='flex items-center justify-center space-x-4'
-        >
-          <FormField
-            control={form.control}
-            name='email'
-            render={({ field }) => (
-              <FormItem>
-                <FormControl>
-                  <Input placeholder='example@example.com' {...field} />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-          <Button type='submit'>Submit</Button>
-        </form>
-      </Form>
+      <div className='h-12 align-top'>
+        <Form {...form}>
+          <form
+            onSubmit={form.handleSubmit(handleSubmit)}
+            className='flex space-x-4'
+          >
+            <FormField
+              control={form.control}
+              name='email'
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <Input placeholder='example@example.com' {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <div className='align-top'>
+              <Button type='submit'>Submit</Button>
+            </div>
+          </form>
+        </Form>
+      </div>
     );
   }
 
diff --git a/components/ui/form.tsx b/components/ui/form.tsx
index 307f911..c7d2445 100644
--- a/components/ui/form.tsx
+++ b/components/ui/form.tsx
@@ -133,7 +133,7 @@ const FormDescription = React.forwardRef<
     <p
       ref={ref}
       id={formDescriptionId}
-      className={cn('text-muted-foreground text-sm', className)}
+      className={cn('text-sm text-muted-foreground', className)}
       {...props}
     />
   );
@@ -147,21 +147,22 @@ const FormMessage = React.forwardRef<
   const { error, formMessageId } = useFormField();
   const body = error ? String(error?.message) : children;
 
-  if (!body) {
-    return null;
-  }
-
   return (
-    <p
-      ref={ref}
-      id={formMessageId}
-      className={cn('text-destructive text-sm font-medium', className)}
-      {...props}
-    >
-      {body}
-    </p>
+    <>
+      {!body ? null : (
+        <p
+          ref={ref}
+          id={formMessageId}
+          className={cn('text-sm font-medium text-destructive', className)}
+          {...props}
+        >
+          {body}
+        </p>
+      )}
+    </>
   );
 });
+
 FormMessage.displayName = 'FormMessage';
 
 export {