Updated the mobile responsiveness for Diagnostic and Demographic

src/components/DemographicInformationInput.tsx

@@ -52,7 +52,7 @@ export default function DemographicInformationInput({mutateUser}: Props) {
 				To make the most of your learning experience, we kindly request you to complete your profile. By providing some essential information
 				about yourself.
 			</h2>
-			<form className="flex flex-col items-center justify-items-center gap-6 w-full h-full -lg:px-8 lg:w-1/2 mb-32" onSubmit={save}>
+			<form className="flex flex-col items-center justify-items-center gap-6 w-full h-full -md:px-4 lg:w-1/2 mb-32" onSubmit={save}>
 				<div className="relative flex flex-col gap-3 w-full">
 					<label className="font-normal text-base text-mti-gray-dim">Country *</label>
 					<CountrySelect value={country} onChange={setCountry} />
@@ -107,7 +107,7 @@ export default function DemographicInformationInput({mutateUser}: Props) {
 								{({checked}) => (
 									<span
 										className={clsx(
-											"px-6 py-4 w-48 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+											"px-6 py-4 w-44 md:w-48 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
 											"transition duration-300 ease-in-out",
 											!checked ? "bg-white border-mti-gray-platinum" : "bg-mti-purple-light border-mti-purple-dark text-white",
 										)}>

src/components/Diagnostic.tsx

@@ -67,7 +67,7 @@ export default function Diagnostic({onFinish}: Props) {
 			<div className="flex flex-col items-center justify-center gap-8 w-full">
 				<h2 className="font-semibold text-xl">What is your current focus?</h2>
 				<div className="flex flex-col gap-16 w-full">
-					<div className="grid grid-cols-2 gap-y-4 gap-x-16">
+					<div className="grid grid-cols-1 md:grid-cols-2 gap-y-4 gap-x-16">
 						<button
 							onClick={() => setFocus("academic")}
 							className={clsx(
@@ -93,8 +93,8 @@ export default function Diagnostic({onFinish}: Props) {
 			</div>
 			<div className="flex flex-col items-center justify-center gap-8 w-full">
 				<h2 className="font-semibold text-xl">What is your current IELTS level?</h2>
-				<div className="flex flex-col gap-16 w-full mb-20">
+				<div className="flex flex-col gap-32 w-full mb-20">
-					<div className="grid grid-cols-2 gap-y-4 gap-x-16">
+					<div className="grid grid-cols-1 md:grid-cols-2 gap-y-4 gap-x-16 mb-24">
 						<div className="w-full flex flex-col gap-3.5 relative">
 							<span className="text-sm text-mti-gray-dim">
 								<span className="font-bold">Reading</span> level
@@ -196,13 +196,22 @@ export default function Diagnostic({onFinish}: Props) {
 							</Menu>
 						</div>
 					</div>
-
+					<div className="md:self-end flex -md:flex-col justify-between w-full gap-8 absolute bottom-8 left-0 px-4 md:px-8">
-					<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
+						<div className="w-full tooltip" data-tip="Your screen size is too small to perform a diagnostic test">
+							<Button
+								color="purple"
+								variant="outline"
+								className="group flex items-center justify-center gap-6 relative md:max-w-[400px] w-full md:hidden"
+								disabled>
+								<BsQuestionSquare className="text-mti-purple-light transition duration-300 ease-in-out" size={20} />
+								<span>Perform diagnostic test instead</span>
+							</Button>
+						</div>
 						<Button
 							onClick={() => updateUser(selectExam)}
 							color="purple"
 							variant="outline"
-							className="group flex items-center justify-center gap-6 relative max-w-[400px] w-full"
+							className="group flex items-center justify-center gap-6 relative md:max-w-[400px] w-full -md:hidden"
 							disabled={!focus}>
 							<BsQuestionSquare
 								className="text-mti-purple-light group-hover:text-white transition duration-300 ease-in-out"
@@ -211,7 +220,7 @@ export default function Diagnostic({onFinish}: Props) {
 							/>
 							<span onClick={() => updateUser(selectExam)}>Perform diagnostic test instead</span>
 						</Button>
-						<Button color="purple" className="max-w-[400px] w-full" onClick={() => updateUser(onFinish)} disabled={isNextDisabled()}>
+						<Button color="purple" className="md:max-w-[400px] w-full" onClick={() => updateUser(onFinish)} disabled={isNextDisabled()}>
 							Next Step
 						</Button>
 					</div>