Corrected some little bugs

src/components/Exercises/FillBlanks.tsx

@@ -89,7 +89,7 @@ export default function FillBlanks({id, allowRepetition, prompt, solutions, text
 					const userSolution = userSolutions.find((x) => x.id === id);
 
 					return (
-						<button className="border-2 rounded-xl px-4 text-blue-400 border-blue-400" onClick={() => setCurrentBlankId(id)}>
+						<button className="border-2 rounded-xl px-4 text-blue-400 border-blue-400 my-2" onClick={() => setCurrentBlankId(id)}>
 							{userSolution ? userSolution.solution : id}
 						</button>
 					);

src/components/Exercises/WriteBlanks.tsx

@@ -33,7 +33,7 @@ function Blank({
 
 	return (
 		<input
-			className={clsx("input border rounded-xl px-2 py-1 bg-white text-blue-400 border-blue-400")}
+			className={clsx("input border rounded-xl px-2 py-1 bg-white text-blue-400 border-blue-400 my-2")}
 			placeholder={id}
 			onChange={(e) => setUserInput(e.target.value)}
 			value={userInput}

src/components/Solutions/FillBlanks.tsx

@@ -18,20 +18,22 @@ export default function FillBlanksSolutions({prompt, solutions, text, userSoluti
 					if (!userSolution) {
 						return (
 							<>
-								<button className={clsx("border-2 rounded-xl px-4 text-gray-500 border-gray-500")}>{solution.solution}</button>
+								<button className={clsx("border-2 rounded-xl px-4 text-gray-500 border-gray-500 my-2")}>{solution.solution}</button>
 							</>
 						);
 					}
 
 					if (userSolution.solution === solution.solution) {
-						return <button className={clsx("border-2 rounded-xl px-4 text-green-500 border-green-500")}>{solution.solution}</button>;
+						return <button className={clsx("border-2 rounded-xl px-4 text-green-500 border-green-500 my-2")}>{solution.solution}</button>;
 					}
 
 					if (userSolution.solution !== solution.solution) {
 						return (
 							<>
-								<button className={clsx("border-2 rounded-xl px-4 text-red-500 border-red-500 mr-1")}>{userSolution.solution}</button>
+								<button className={clsx("border-2 rounded-xl px-4 text-red-500 border-red-500 mr-1 my-2")}>
-								<button className={clsx("border-2 rounded-xl px-4 text-blue-400 border-blue-400")}>{solution.solution}</button>
+									{userSolution.solution}
+								</button>
+								<button className={clsx("border-2 rounded-xl px-4 text-green-400 border-green-400 my-2")}>{solution.solution}</button>
 							</>
 						);
 					}

src/components/Solutions/MultipleChoice.tsx

@@ -74,6 +74,7 @@ function Question({
 							key={option.id}
 							onClick={() => (onSelectOption ? onSelectOption(option.id) : null)}
 							className={clsx("flex border-2 p-4 rounded-xl gap-2 cursor-pointer bg-white", optionColor(option.id))}>
+							{showSolution && optionBadge(option.id)}
 							<span className="font-bold">{option.id}.</span>
 							<span>{option.text}</span>
 						</div>

src/components/Solutions/WriteBlanks.tsx

@@ -44,7 +44,7 @@ function Blank({
 
 	return (
 		<input
-			className={clsx("input border rounded-xl px-2 py-1 bg-white", !solutions && "text-blue-400 border-blue-400", getSolutionStyling())}
+			className={clsx("input border rounded-xl px-2 py-1 bg-white my-2", !solutions && "text-blue-400 border-blue-400", getSolutionStyling())}
 			placeholder={id}
 			onChange={(e) => setUserInput(e.target.value)}
 			value={!solutions ? userInput : solutions.join(" / ")}