Improve styling

src/App.jsx

@@ -103,11 +103,12 @@ export const App = () => {
 
                                     setIndex((index) => ++index)
                                     event.target.value = ""
-                                    setAnswerTimeout(
-                                        setTimeout(() => {
-                                            setCorrectAnswer(true)
-                                        }, 15000)
-                                    )
+                                    if (index === numbers?.length)
+                                        setAnswerTimeout(
+                                            setTimeout(() => {
+                                                setCorrectAnswer(true)
+                                            }, 15000)
+                                        )
                                 }
                             }}
                         />

src/components/Nav.jsx

@@ -7,41 +7,46 @@ export const Nav = ({ mode, setMode, modeNumbers, setModeNumbers }) => {
         <nav className={styles.nav}>
             <ul>
                 <li>
-                    <h1>Mental Math</h1>
+                    <h1 id={styles.header}> Mental Math</h1>
                 </li>
                 <li>
-                    <button
-                        onClick={() =>
-                            setModeNumbers((numbers) =>
-                                numbers > 2 ? --numbers : numbers
-                            )
-                        }
-                    >
-                        <FaMinus />
-                    </button>
-                    <span>{modeNumbers}</span>
-                    <button
-                        onClick={() => setModeNumbers((numbers) => ++numbers)}
-                    >
-                        <FaPlus />
-                    </button>
-                    <br />
-                    <button
-                        className={`${
-                            mode == Modes.Addition ? styles.active : ""
-                        } ${styles.modeButton}`}
-                        onClick={() => setMode(Modes.Addition)}
-                    >
-                        Addition
-                    </button>
-                    <button
-                        className={`${
-                            mode == Modes.Subtraction ? styles.active : ""
-                        } ${styles.modeButton}`}
-                        onClick={() => setMode(Modes.Subtraction)}
-                    >
-                        Subtraction
-                    </button>
+                    <div id={styles.modeNumbers}>
+                        <button
+                            onClick={() =>
+                                setModeNumbers((numbers) =>
+                                    numbers > 2 ? --numbers : numbers
+                                )
+                            }
+                        >
+                            <FaMinus />
+                        </button>
+                        <span>{modeNumbers}</span>
+                        <button
+                            onClick={() =>
+                                setModeNumbers((numbers) => ++numbers)
+                            }
+                        >
+                            <FaPlus />
+                        </button>
+                    </div>
+                    <div>
+                        <button
+                            className={`${
+                                mode == Modes.Addition ? styles.active : ""
+                            } ${styles.modeButton}`}
+                            onClick={() => setMode(Modes.Addition)}
+                        >
+                            Addition
+                        </button>
+                        <button
+                            className={`${
+                                mode == Modes.Subtraction ? styles.active : ""
+                            } ${styles.modeButton}`}
+                            onClick={() => setMode(Modes.Subtraction)}
+                        >
+                            Subtraction
+                        </button>
+                    </div>
                 </li>
             </ul>
         </nav>

src/styles/Nav.module.css

@@ -20,37 +20,55 @@
     justify-content: space-between;
 }
 
-.nav ul li {
+.nav li {
     display: flex;
     gap: 10px;
 }
 
-.nav ul li * {
+.nav div {
+    display: flex;
+}
+
+.nav li * {
     font-size: 1.25em;
 }
 
-.nav ul li span {
+.nav span {
     display: flex;
     flex-direction: row;
     align-items: flex-end;
 }
 
-.nav ul li button {
+.nav button {
     border: none;
     background: transparent;
     cursor: pointer;
 }
 
-.nav ul li .modeButton:not(.active) {
+.nav .modeButton:not(.active) {
     text-decoration: underline;
 }
 
+.active {
+    font-weight: bold;
+}
+
+#modeNumbers {
+    gap: 5px;
+}
+
 @media (prefers-color-scheme: dark) {
     .nav ul {
         background-color: #161f27;
     }
 }
 
-.active {
-    font-weight: bold;
+@media (max-width: 600px) {
+    #header {
+        display: none;
+    }
+
+    .nav ul {
+        justify-content: center;
+    }
 }