fix: add input scroll into view

src/components/form/NumberInput/NumberInput.tsx

@@ -1,6 +1,6 @@
 import { motion, type HTMLMotionProps } from "motion/react";
 import clsx, { type ClassValue } from "clsx";
-import { type ReactNode, useRef, useState, type ChangeEvent, useId } from "react";
+import { type ReactNode, useRef, useState, type ChangeEvent, type FocusEvent, useId } from "react";
 import KeyboardIcon from "@components/icons/KeyboardIcon";
 
 import classes from "./NumberInput.module.css";
@@ -29,6 +29,7 @@ export default function NumberInput({
   prefix,
   value,
   onChange,
+  onFocus,
   ...props
 }: Props) {
   const play = useAudioStore((s) => s.play);
@@ -44,6 +45,16 @@ export default function NumberInput({
     setStrValue(value?.toString() ?? "");
   }
 
+  const handleFocus = (e: FocusEvent<HTMLInputElement>) => {
+    onFocus?.(e);
+    const target = e.target;
+    setTimeout(() => {
+      if (target.isConnected) {
+        target.scrollIntoView({ block: "center", behavior: "smooth" });
+      }
+    }, 100);
+  };
+
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
     const normalized = filterNumericInput(e.target.value);
     setStrValue(normalized);
@@ -65,6 +76,7 @@ export default function NumberInput({
           className={classes.input}
           value={strValue}
           onChange={handleChange}
+          onFocus={handleFocus}
         />
       </label>
       <motion.button

src/components/form/TextAreaInput/TextAreaInput.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 "./TextAreaInput.module.css";
 
@@ -8,10 +9,21 @@ type Props = Omit<HTMLMotionProps<"textarea">, "className"> & {
   error?: boolean;
 };
 
-export default function TextAreaInput({ className, error, ...props }: Props) {
+export default function TextAreaInput({ className, error, onFocus, ...props }: Props) {
+  const handleFocus = (e: FocusEvent<HTMLTextAreaElement>) => {
+    onFocus?.(e);
+    const target = e.target;
+    setTimeout(() => {
+      if (target.isConnected) {
+        target.scrollIntoView({ block: "center", behavior: "smooth" });
+      }
+    }, 100);
+  };
+
   return (
     <motion.textarea
       {...props}
+      onFocus={handleFocus}
       className={clsx(classes.input, error && classes.error, className)}
     />
   );

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)}
     />
   );