551: Fix Leaderboard Card Ordering On Mobile View

Author: isabellalam12

js/src/app/dashboard/Dashboard.page.tsx

@@ -63,15 +63,30 @@ export default function DashboardPage() {
             : <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>
+            {smallPhone ?
+              <>
+                <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}>
+                  <DashboardLeaderboard
+                    userId={data.user.id}
+                    userTags={data.user.tags}
+                  />
+                </Flex>
+                <Flex direction={"column"} flex={1}>
+                  <ProblemOfTheDay />
+                </Flex>
+              </>
+            }
             <Flex direction={"column"} flex={1}>
               <RecentSubmissions userId={data.user.id} />
             </Flex>

js/src/app/dashboard/_components/ProblemOfTheDay/ProblemOfTheDay.tsx

@@ -40,7 +40,10 @@ export default function ProblemOfTheDay() {
   const json = data.payload;
 
   return (
-    <CodebloomCard miw={"31vw"} mih={"63vh"}>
+    <CodebloomCard
+      miw={{ base: "31vw", md: "31vw" }}
+      mih={{ base: "auto", md: "63vh" }}
+    >
       <Center>
         <Title style={{ textAlign: "center" }} order={3}>
           Problem of the day