Made some of the code a bit more responsive

src/exams/Reading.tsx

@@ -100,27 +100,27 @@ export default function Reading({exam, showSolutions = false, onFinish}: Props)
 	};
 
 	const renderText = () => (
-		<>
-			<div className="flex flex-col">
-				<span className="text-lg font-semibold">
+		<div className="flex flex-col gap-4 w-full">
+			<div className="flex flex-col w-full gap-2">
+				<span className="text-base md:text-lg font-semibold">
 					Please read the following excerpt attentively, you will then be asked questions about the text you&apos;ve read.
 				</span>
 				<span className="self-end text-sm">You will be allowed to read the text while doing the exercises</span>
 			</div>
-			<Panel header={exam.text.title} className="overflow-scroll">
-				<p className="overflow-scroll">
+			<Panel header={exam.text.title}>
+				<p className="overflow-auto">
 					{exam.text.content.split("\\n").map((line, index) => (
 						<p key={index}>{line}</p>
 					))}
 				</p>
 			</Panel>
-		</>
+		</div>
 	);
 
 	return (
 		<>
 			<TextModal {...exam.text} isOpen={showTextModal} onClose={() => setShowTextModal(false)} />
-			<div className="w-full h-full relative flex flex-col gap-8 items-center justify-center p-8 px-16 overflow-hidden">
+			<div className="w-full h-full relative flex flex-col gap-8 items-center justify-center p-2 md:p-8 px-4 md:px-16 overflow-hidden">
 				{exerciseIndex === -1 && renderText()}
 				{exerciseIndex > -1 &&
 					exerciseIndex < exam.exercises.length &&
@@ -130,7 +130,8 @@ export default function Reading({exam, showSolutions = false, onFinish}: Props)
 					exerciseIndex < exam.exercises.length &&
 					showSolutions &&
 					renderSolution(exam.exercises[exerciseIndex], nextExercise, previousExercise)}
-				<div className={clsx("flex gap-8", exerciseIndex > -1 ? "w-full justify-between" : "self-end")}>
+				<div
+					className={clsx("flex gap-8", exerciseIndex > -1 ? "w-full justify-center md:justify-between" : "self-end w-full md:w-fit flex")}>
 					{exerciseIndex > -1 && (
 						<button
 							className={clsx(
@@ -145,7 +146,9 @@ export default function Reading({exam, showSolutions = false, onFinish}: Props)
 						</button>
 					)}
 					{exerciseIndex === -1 && (
-						<button className={clsx("btn btn-wide gap-4 relative text-white self-end", infoButtonStyle)} onClick={() => nextExercise()}>
+						<button
+							className={clsx("btn w-full md:btn-wide gap-4 relative text-white self-end", infoButtonStyle)}
+							onClick={() => nextExercise()}>
 							Next
 							<div className="absolute right-4">
 								<Icon path={mdiArrowRight} color="white" size={1} />