Bug fixes

components/tools/magic-8-ball.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { AnimatePresence, motion } from "framer-motion";
 import { Pencil, Plus, Sparkles, X } from "lucide-react";
 import { gsap } from "@/lib/gsap";
@@ -36,6 +36,8 @@ export default function Magic8Ball() {
   const [editing, setEditing] = useState(false);
 
   const ballRef = useRef<HTMLDivElement>(null);
+  const answerInputRefs = useRef<Array<HTMLInputElement | null>>([]);
+  const justAddedRef = useRef(false);
   const { play } = useSound();
   const reduced = usePrefersReducedMotion();
 
@@ -90,8 +92,17 @@ export default function Magic8Ball() {
   const addAnswer = () => {
     if (answers.length >= MAX_ANSWERS) return;
     setAnswers((list) => [...list, ""]);
+    justAddedRef.current = true;
   };
 
+  useEffect(() => {
+    if (!justAddedRef.current) return;
+    justAddedRef.current = false;
+    const last = answerInputRefs.current[answers.length - 1];
+    last?.scrollIntoView({ block: "nearest", behavior: "smooth" });
+    last?.focus();
+  }, [answers.length]);
+
   const removeAnswer = (i: number) => {
     if (answers.length <= MIN_ANSWERS) return;
     setAnswers((list) => list.filter((_, idx) => idx !== i));
@@ -138,7 +149,7 @@ export default function Magic8Ball() {
                       animate={{ opacity: 1, scale: 1, filter: "blur(0px)" }}
                       exit={{ opacity: 0, filter: "blur(6px)" }}
                       transition={{ duration: 0.5, ease: "easeOut" }}
-                      className="text-center font-display text-[13px] font-semibold leading-snug text-[#dde5dd]"
+                      className="text-center font-display text-sm font-semibold leading-snug text-[#dde5dd]"
                     >
                       {answer}
                     </motion.p>
@@ -210,6 +221,9 @@ export default function Magic8Ball() {
                 {answers.map((a, i) => (
                   <div key={i} className="flex items-center gap-2">
                     <input
+                      ref={(el) => {
+                        answerInputRefs.current[i] = el;
+                      }}
                       value={a}
                       onChange={(e) => updateAnswer(i, e.target.value)}
                       maxLength={60}