fix: add input scroll into view

src/components/form/TextInput/TextInput.tsx

@@ -1,5 +1,6 @@
 import { motion, type HTMLMotionProps } from "motion/react";
 import clsx, { type ClassValue } from "clsx";
+import type { FocusEvent } from "react";
 
 import classes from "./TextInput.module.css";
 
@@ -8,11 +9,22 @@ type Props = Omit<HTMLMotionProps<"input">, "className"> & {
   error?: boolean;
 };
 
-export default function TextInput({ className, error, ...props }: Props) {
+export default function TextInput({ className, error, onFocus, ...props }: Props) {
+  const handleFocus = (e: FocusEvent<HTMLInputElement>) => {
+    onFocus?.(e);
+    const target = e.target;
+    setTimeout(() => {
+      if (target.isConnected) {
+        target.scrollIntoView({ block: "center", behavior: "smooth" });
+      }
+    }, 100);
+  };
+
   return (
     <motion.input
       {...props}
       type="text"
+      onFocus={handleFocus}
       className={clsx(classes.input, error && classes.error, className)}
     />
   );