From 1373c786511944c96797d882429b8879a9bd20b8 Mon Sep 17 00:00:00 2001
From: Nancy Huang <205217630+naanci@users.noreply.github.com>
Date: Fri, 23 Jan 2026 03:02:04 -0500
Subject: [PATCH 1/2] 656: removed extra padding from landing/dashboard page on
 mobile

---
 js/src/app/_component/AboutUs.tsx       | 46 ++++++++++----------
 js/src/app/dashboard/Dashboard.page.tsx | 58 +++++++++++++------------
 2 files changed, 54 insertions(+), 50 deletions(-)

diff --git a/js/src/app/_component/AboutUs.tsx b/js/src/app/_component/AboutUs.tsx
index a8c7af7ac..450cfedf9 100644
--- a/js/src/app/_component/AboutUs.tsx
+++ b/js/src/app/_component/AboutUs.tsx
@@ -30,8 +30,16 @@ export default function AboutUs() {
   };
 
   return (
-    <>
-      <Flex direction={"row"} h={"92vh"} w={"98vw"} visibleFrom="lg">
+    <Box
+      mx="-lg"
+      w="100vw"
+      maw="100vw"
+      style={{
+        overflowX: "hidden",
+        touchAction: "pan-y",
+      }}
+    >
+      <Flex direction={"row"} h={"92vh"} w={"100%"} visibleFrom="lg">
         <Flex
           align={"center"}
           justify={"center"}
@@ -47,15 +55,11 @@ export default function AboutUs() {
           >
             Celebrating CodeBloom's 1 Year Anniversary! 🎉
           </Badge>
-          <Title order={3} style={{ color: "#4cffb0", alignItems: "center" }}>
+          <Title order={3} style={{ color: "#4cffb0" }}>
             Level Up Your Coding with
           </Title>
           <Title order={3}>Patina's LeetCode Challenge!</Title>
-          <div
-            style={{
-              padding: "1rem",
-            }}
-          >
+          <Box p="1rem">
             <Center>
               <Group gap="sm">
                 <Button variant="white" onClick={scrollToSection}>
@@ -66,7 +70,7 @@ export default function AboutUs() {
                 </Link>
               </Group>
             </Center>
-          </div>
+          </Box>
         </Flex>
         <Flex
           align={"center"}
@@ -81,8 +85,8 @@ export default function AboutUs() {
           </Box>
         </Flex>
       </Flex>
-      <Flex h={"80vh"} w={"100vw"} hiddenFrom="lg">
-        <Stack align={"center"} justify={"center"} h={"100%"} w={"100vw"}>
+      <Flex h={"80vh"} w={"100%"} hiddenFrom="lg">
+        <Stack align={"center"} justify={"center"} h={"100%"} w={"100%"}>
           <Badge
             variant={"gradient"}
             gradient={{ from: "green", to: "cyan", deg: 90 }}
@@ -91,15 +95,11 @@ export default function AboutUs() {
           >
             Celebrating CodeBloom's 1 Year Anniversary! 🎉
           </Badge>
-          <Title order={5} style={{ color: "#4cffb0", alignItems: "center" }}>
+          <Title order={5} style={{ color: "#4cffb0" }}>
             Level Up Your Coding with
           </Title>
           <Title order={5}>Patina's LeetCode Challenge!</Title>
-          <div
-            style={{
-              padding: "1rem",
-            }}
-          >
+          <Box p="1rem">
             <Center>
               <Group gap="sm">
                 <Button variant="white" onClick={scrollToSection}>
@@ -110,17 +110,19 @@ export default function AboutUs() {
                 </Link>
               </Group>
             </Center>
-          </div>
+          </Box>
         </Stack>
       </Flex>
       <Container hiddenFrom={"lg"}>
         <CurrentLeaderboardMetadata showClock syntaxStripSize={"lg"} />
         <MiniLeaderboardMobile />
       </Container>
-      <SchoolSection />
-      <div ref={targetSectionRef} style={{ padding: "2rem" }}>
+      <Box px="lg">
+        <SchoolSection />
+      </Box>
+      <Box p="2rem" ref={targetSectionRef}>
         <OurFeatures />
-      </div>
-    </>
+      </Box>
+    </Box>
   );
 }
diff --git a/js/src/app/dashboard/Dashboard.page.tsx b/js/src/app/dashboard/Dashboard.page.tsx
index f0a6b6c3b..ab528f4f5 100644
--- a/js/src/app/dashboard/Dashboard.page.tsx
+++ b/js/src/app/dashboard/Dashboard.page.tsx
@@ -8,7 +8,7 @@ import DocumentTitle from "@/components/ui/title/DocumentTitle";
 import Toast from "@/components/ui/toast/Toast";
 import ToastWithRedirect from "@/components/ui/toast/ToastWithRedirect";
 import { useAuthQuery } from "@/lib/api/queries/auth";
-import { Center, Flex, Loader, Title } from "@mantine/core";
+import { Center, Flex, Loader, Title, Box } from "@mantine/core";
 import { useMediaQuery } from "@mantine/hooks";
 
 export default function DashboardPage() {
@@ -52,38 +52,40 @@ export default function DashboardPage() {
       <DocumentDescription
         description={`CodeBloom - Refresh your latest submissions`}
       />
-      <Flex
-        p={"32px"}
-        direction={"column"}
-        gap={"lg"}
+      <Box
+        mx="-lg"
+        w="100vw"
+        maw="100vw"
         style={{
-          width: "98vw",
-          minHeight: "90vh",
+          overflowX: "hidden",
+          touchAction: "pan-y",
         }}
       >
-        <Center>
-          <Title order={2}>Dashboard</Title>
-        </Center>
-        <Center>
-          {!data.user.leetcodeUsername ?
-            <OnboardingLeetcodeUser />
-          : <RefreshSubmissions schoolRegistered={schoolRegistered} />}
-        </Center>
-        <Flex direction={smallPhone ? "row" : "column"} gap={"md"}>
-          <Flex direction={"column"} flex={1}>
-            <ProblemOfTheDay />
-          </Flex>
-          <Flex direction={"column"} flex={1}>
-            <DashboardLeaderboard
-              userId={data.user.id}
-              userTags={data.user.tags}
-            />
-          </Flex>
-          <Flex direction={"column"} flex={1}>
-            <RecentSubmissions userId={data.user.id} />
+        <Flex p={"32px"} direction={"column"} gap={"lg"} w="100%" mih="90vh">
+          <Center>
+            <Title order={2}>Dashboard</Title>
+          </Center>
+          <Center>
+            {!data.user.leetcodeUsername ?
+              <OnboardingLeetcodeUser />
+            : <RefreshSubmissions schoolRegistered={schoolRegistered} />}
+          </Center>
+          <Flex direction={smallPhone ? "row" : "column"} gap={"md"}>
+            <Flex direction={"column"} flex={1}>
+              <ProblemOfTheDay />
+            </Flex>
+            <Flex direction={"column"} flex={1}>
+              <DashboardLeaderboard
+                userId={data.user.id}
+                userTags={data.user.tags}
+              />
+            </Flex>
+            <Flex direction={"column"} flex={1}>
+              <RecentSubmissions userId={data.user.id} />
+            </Flex>
           </Flex>
         </Flex>
-      </Flex>
+      </Box>
     </>
   );
 }

From 2e53979edd9dfb586114cd8804ad789d41f3a5d9 Mon Sep 17 00:00:00 2001
From: Nancy Huang <205217630+naanci@users.noreply.github.com>
Date: Sat, 24 Jan 2026 03:49:28 -0500
Subject: [PATCH 2/2] 656: removed unneeded props

---
 js/src/app/_component/AboutUs.tsx       | 14 +++-----------
 js/src/app/dashboard/Dashboard.page.tsx | 10 +---------
 2 files changed, 4 insertions(+), 20 deletions(-)

diff --git a/js/src/app/_component/AboutUs.tsx b/js/src/app/_component/AboutUs.tsx
index 450cfedf9..b499b0b2b 100644
--- a/js/src/app/_component/AboutUs.tsx
+++ b/js/src/app/_component/AboutUs.tsx
@@ -30,15 +30,7 @@ export default function AboutUs() {
   };
 
   return (
-    <Box
-      mx="-lg"
-      w="100vw"
-      maw="100vw"
-      style={{
-        overflowX: "hidden",
-        touchAction: "pan-y",
-      }}
-    >
+    <Box mx="-lg">
       <Flex direction={"row"} h={"92vh"} w={"100%"} visibleFrom="lg">
         <Flex
           align={"center"}
@@ -55,11 +47,11 @@ export default function AboutUs() {
           >
             Celebrating CodeBloom's 1 Year Anniversary! 🎉
           </Badge>
-          <Title order={3} style={{ color: "#4cffb0" }}>
+          <Title order={3} style={{ color: "#4cffb0", alignItems: "center" }}>
             Level Up Your Coding with
           </Title>
           <Title order={3}>Patina's LeetCode Challenge!</Title>
-          <Box p="1rem">
+          <Box p="xs">
             <Center>
               <Group gap="sm">
                 <Button variant="white" onClick={scrollToSection}>
diff --git a/js/src/app/dashboard/Dashboard.page.tsx b/js/src/app/dashboard/Dashboard.page.tsx
index ab528f4f5..6b092646d 100644
--- a/js/src/app/dashboard/Dashboard.page.tsx
+++ b/js/src/app/dashboard/Dashboard.page.tsx
@@ -52,15 +52,7 @@ export default function DashboardPage() {
       <DocumentDescription
         description={`CodeBloom - Refresh your latest submissions`}
       />
-      <Box
-        mx="-lg"
-        w="100vw"
-        maw="100vw"
-        style={{
-          overflowX: "hidden",
-          touchAction: "pan-y",
-        }}
-      >
+      <Box mx="-lg">
         <Flex p={"32px"} direction={"column"} gap={"lg"} w="100%" mih="90vh">
           <Center>
             <Title order={2}>Dashboard</Title>