From 006b0170fab08f50bc3fb3773290962170c9519b Mon Sep 17 00:00:00 2001
From: 1o8ryan <1o8zhouryan@gmail.com>
Date: Sun, 25 Oct 2026 11:13:23 -0400
Subject: [PATCH] Ordered the dashboard different when in mobile view and
 resized the problem of the day to clear dead space when in mobile view

DINO-1049: Formatted view for the dashboard only in mobile

fixed it so it should pass SonarQube Cloud

removed the normal and used flex hopefully this resolves matine problems

fix rabit ai changes

oops flipped the order
---
 js/src/app/dashboard/Dashboard.page.tsx       | 57 ++++++++++++++-----
 .../ProblemOfTheDay/ProblemOfTheDay.tsx       |  6 +-
 2 files changed, 47 insertions(+), 16 deletions(-)

diff --git a/js/src/app/dashboard/Dashboard.page.tsx b/js/src/app/dashboard/Dashboard.page.tsx
index 6b092646d..22a491ded 100644
--- a/js/src/app/dashboard/Dashboard.page.tsx
+++ b/js/src/app/dashboard/Dashboard.page.tsx
@@ -46,6 +46,7 @@ export default function DashboardPage() {
       />
     );
   }
+
   return (
     <>
       <DocumentTitle title={`CodeBloom - Dashboard`} />
@@ -62,19 +63,49 @@ export default function DashboardPage() {
               <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
+            direction={smallPhone ? "row" : "column"}
+            wrap={smallPhone ? undefined : "wrap"}
+            gap={"md"}
+            align={smallPhone ? "flex-start" : "stretch"}
+          >
+            {smallPhone ?
+              <>
+                {
+                  <Flex direction={"column"}>
+                    <ProblemOfTheDay />
+                  </Flex>
+                }
+                {
+                  <Flex direction={"column"} flex={1}>
+                    <DashboardLeaderboard
+                      userId={data.user.id}
+                      userTags={data.user.tags}
+                    />
+                  </Flex>
+                }
+              </>
+            : <>
+                {
+                  <Flex direction={"column"} flex={1}>
+                    <DashboardLeaderboard
+                      userId={data.user.id}
+                      userTags={data.user.tags}
+                    />
+                  </Flex>
+                }
+                {
+                  <Flex direction={"column"}>
+                    <ProblemOfTheDay />
+                  </Flex>
+                }
+              </>
+            }
+            <div>
+              <Flex direction={"column"} flex={1}>
+                <RecentSubmissions userId={data.user.id} />
+              </Flex>
+            </div>
           </Flex>
         </Flex>
       </Box>
diff --git a/js/src/app/dashboard/_components/ProblemOfTheDay/ProblemOfTheDay.tsx b/js/src/app/dashboard/_components/ProblemOfTheDay/ProblemOfTheDay.tsx
index 83b8b6b78..5b640829a 100644
--- a/js/src/app/dashboard/_components/ProblemOfTheDay/ProblemOfTheDay.tsx
+++ b/js/src/app/dashboard/_components/ProblemOfTheDay/ProblemOfTheDay.tsx
@@ -8,7 +8,7 @@ export default function ProblemOfTheDay() {
   const { data, status } = useFetchPotdQuery();
 
   const renderStatusCard = (message: string) => (
-    <CodebloomCard miw={"31vw"} mih={"63vh"}>
+    <CodebloomCard miw={"31vw"} mih={{ base: "auto", md: "63vh" }}>
       <Flex
         direction={"row"}
         justify={"center"}
@@ -40,7 +40,7 @@ export default function ProblemOfTheDay() {
   const json = data.payload;
 
   return (
-    <CodebloomCard miw={"31vw"} mih={"63vh"}>
+    <CodebloomCard miw={"31vw"} mih={{ base: "auto", md: "63vh" }}>
       <Center>
         <Title style={{ textAlign: "center" }} order={3}>
           Problem of the day
@@ -55,7 +55,7 @@ export default function ProblemOfTheDay() {
         align={"center"}
         justify={"center"}
         w={"100%"}
-        h={"100%"}
+        h={{ base: "auto", md: "100%" }}
       >
         <Title style={{ textAlign: "center" }} order={4}>
           {json.title}