- Did a bit of refactor related to the exam/exercises page;

- Improved the responsiveness of the page for mobile;

src/pages/record.tsx

@@ -241,8 +241,8 @@ export default function History({user}: {user: User}) {
 			<ToastContainer />
 			{user && (
 				<Layout user={user}>
-					<div className="w-full flex justify-between items-center">
-						<div className="w-3/4">
+					<div className="w-full flex -md:flex-col -md:gap-4 justify-between items-center">
+						<div className="md:w-3/4">
 							{(user.type === "developer" || user.type === "owner") && (
 								<Select
 									options={users.map((x) => ({value: x.id, label: `${x.name} - ${x.email}`}))}
@@ -274,7 +274,7 @@ export default function History({user}: {user: User}) {
 								/>
 							)}
 						</div>
-						<div className="flex gap-4 w-full justify-end">
+						<div className="flex gap-4 w-full -md:justify-center md:justify-end">
 							<button
 								className={clsx(
 									"bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light",
@@ -305,7 +305,7 @@ export default function History({user}: {user: User}) {
 						</div>
 					</div>
 					{groupedStats && Object.keys(groupedStats).length > 0 && !isStatsLoading && (
-						<div className="grid grid-cols-3 w-full gap-6">
+						<div className="grid grid-cols-1 md:grid-cols-3 w-full gap-4 md:gap-6">
 							{Object.keys(filterStatsByDate(groupedStats))
 								.sort((a, b) => parseInt(b) - parseInt(a))
 								.map(customContent)}