fix: missing responsiveness

Author: Makhare01

src/pages/my-quizzes/details/page.tsx

@@ -21,15 +21,15 @@ export const MyQuizDetailsPage = () => {
   });
 
   return (
-    <Box width={1} height={1} p={3}>
+    <Box width={1} height={1} p={3} maxHeight={1}>
       {match($quizDetails)
         .with({ isLoading: true }, () => <QuizDetailsSkeleton />)
         .with({ isError: true, error: P.select() }, (error) => (
           <Typography>{error.message}</Typography>
         ))
         .with({ isSuccess: true, data: P.select() }, (quiz) => {
           return (
-            <Box>
+            <Box sx={{ flex: 1, maxHeight: 1, overflow: "auto" }}>
               <Box
                 sx={{
                   display: "flex",

src/pages/profile/components/profile-tabs/profile-tabs.tsx

@@ -20,7 +20,7 @@ const tabs: Array<Tab<TabTypes>> = [
 
 export const ProfileTabs = () => {
   return (
-    <Box sx={{ width: 1, maxWidth: { xs: 420, sm: 680 } }}>
+    <Box sx={{ width: 1, maxWidth: { xs: 420, sm: 680 }, p: 3 }}>
       <Tabs<TabTypes> defaultTab="info" tabs={tabs} />
     </Box>
   );

src/pages/profile/page.tsx

@@ -13,12 +13,14 @@ export const Profile = () => {
 
   return (
     <Box
-      height={1}
-      width={1}
-      display="flex"
-      flexDirection="column"
-      alignItems="center"
-      gap={3}
+      sx={{
+        width: 1,
+        height: 1,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: 3,
+      }}
     >
       <Box
         width={1}