fix: keep input elements aligned when displaying error message

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 {