From 578f42d9b19abc4fa0538a33a51771ca8bc1d55d Mon Sep 17 00:00:00 2001
From: Tiago Ribeiro <tiago.ribeiro@ecrop.dev>
Date: Sun, 3 Sep 2023 20:47:24 +0100
Subject: [PATCH] Improved the overall sizing of the Reading exam

---
 src/components/Exercises/MultipleChoice.tsx | 4 ++--
 src/exams/Reading.tsx                       | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Exercises/MultipleChoice.tsx b/src/components/Exercises/MultipleChoice.tsx
index 8b541d9b..99d066ae 100644
--- a/src/components/Exercises/MultipleChoice.tsx
+++ b/src/components/Exercises/MultipleChoice.tsx
@@ -16,7 +16,7 @@ function Question({
 	return (
 		<div className="flex flex-col gap-10">
 			<span className="">{prompt}</span>
-			<div className="flex justify-between">
+			<div className="flex flex-wrap gap-4 justify-between">
 				{variant === "image" &&
 					options.map((option) => (
 						<div
@@ -90,7 +90,7 @@ export default function MultipleChoice({id, prompt, type, questions, userSolutio
 
 	return (
 		<>
-			<div className="flex flex-col gap-2 mt-4 h-full mb-20 bg-mti-gray-smoke rounded-xl px-16 py-8">
+			<div className="flex flex-col gap-2 mt-4 h-fit mb-20 bg-mti-gray-smoke rounded-xl px-16 py-8">
 				<span className="text-xl font-semibold">{prompt}</span>
 				{questionIndex < questions.length && (
 					<Question
diff --git a/src/exams/Reading.tsx b/src/exams/Reading.tsx
index 52f20eee..0871ad10 100644
--- a/src/exams/Reading.tsx
+++ b/src/exams/Reading.tsx
@@ -166,7 +166,7 @@ export default function Reading({exam, showSolutions = false, onFinish}: Props)
 	};
 
 	const renderText = () => (
-		<div className="flex flex-col gap-6 w-full bg-mti-gray-seasalt rounded-xl py-8 px-16">
+		<div className="flex flex-col gap-6 w-full bg-mti-gray-seasalt rounded-xl py-8 px-16 mt-4">
 			<div className="flex flex-col w-full gap-2">
 				<h4 className="text-xl font-semibold">
 					Please read the following excerpt attentively, you will then be asked questions about the text you&apos;ve read.
@@ -198,7 +198,7 @@ export default function Reading({exam, showSolutions = false, onFinish}: Props)
 					disableTimer={showSolutions}
 					label={exerciseIndex === -1 ? undefined : convertCamelCaseToReadable(exam.exercises[exerciseIndex].type)}
 				/>
-				<div className="flex gap-4 mb-20">
+				<div className="grid grid-cols-2 gap-4 mb-20 w-full">
 					{renderText()}
 					{exerciseIndex > -1 &&
 						exerciseIndex < exam.exercises.length &&