Improve styling

src/App.jsx

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

src/components/Nav.jsx

@@ -7,9 +7,10 @@ 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>
+                    <div id={styles.modeNumbers}>
                         <button
                             onClick={() =>
                                 setModeNumbers((numbers) =>
@@ -21,11 +22,14 @@ export const Nav = ({ mode, setMode, modeNumbers, setModeNumbers }) => {
                         </button>
                         <span>{modeNumbers}</span>
                         <button
-                        onClick={() => setModeNumbers((numbers) => ++numbers)}
+                            onClick={() =>
+                                setModeNumbers((numbers) => ++numbers)
+                            }
                         >
                             <FaPlus />
                         </button>
-                    <br />
+                    </div>
+                    <div>
                         <button
                             className={`${
                                 mode == Modes.Addition ? styles.active : ""
@@ -42,6 +46,7 @@ export const Nav = ({ mode, setMode, modeNumbers, setModeNumbers }) => {
                         >
                             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;
+    }
 }