From ca4c324ccdecd3ade6cf7da6d0ddd5c0cf57fc41 Mon Sep 17 00:00:00 2001
From: Isabella Lam <isabellalam12@gmail.com>
Date: Tue, 14 Apr 2026 23:56:06 -0400
Subject: [PATCH 1/3] 551: Fix Leaderboard Card Ordering On Mobile View

---
 js/src/app/dashboard/Dashboard.page.tsx       | 33 ++++++++++++++-----
 .../ProblemOfTheDay/ProblemOfTheDay.tsx       |  5 ++-
 2 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/js/src/app/dashboard/Dashboard.page.tsx b/js/src/app/dashboard/Dashboard.page.tsx
index 6b092646d..8fef0f36b 100644
--- a/js/src/app/dashboard/Dashboard.page.tsx
+++ b/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>
diff --git a/js/src/app/dashboard/_components/ProblemOfTheDay/ProblemOfTheDay.tsx b/js/src/app/dashboard/_components/ProblemOfTheDay/ProblemOfTheDay.tsx
index 83b8b6b78..1dc95ae4d 100644
--- a/js/src/app/dashboard/_components/ProblemOfTheDay/ProblemOfTheDay.tsx
+++ b/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

From f4a468ab45ce1f6e737f9b9fa96a61a831211376 Mon Sep 17 00:00:00 2001
From: Isabella Lam <isabellalam12@gmail.com>
Date: Wed, 15 Apr 2026 00:10:14 -0400
Subject: [PATCH 2/3] 551: simplified syntax for miw prop

---
 .../_components/ProblemOfTheDay/ProblemOfTheDay.tsx          | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/js/src/app/dashboard/_components/ProblemOfTheDay/ProblemOfTheDay.tsx b/js/src/app/dashboard/_components/ProblemOfTheDay/ProblemOfTheDay.tsx
index 1dc95ae4d..e68fea41c 100644
--- a/js/src/app/dashboard/_components/ProblemOfTheDay/ProblemOfTheDay.tsx
+++ b/js/src/app/dashboard/_components/ProblemOfTheDay/ProblemOfTheDay.tsx
@@ -40,10 +40,7 @@ export default function ProblemOfTheDay() {
   const json = data.payload;
 
   return (
-    <CodebloomCard
-      miw={{ base: "31vw", md: "31vw" }}
-      mih={{ base: "auto", md: "63vh" }}
-    >
+    <CodebloomCard miw="31vw" mih={{ base: "auto", md: "63vh" }}>
       <Center>
         <Title style={{ textAlign: "center" }} order={3}>
           Problem of the day

From e604e04912b64961519f0417fefe64addc55add9 Mon Sep 17 00:00:00 2001
From: Isabella Lam <isabellalam12@gmail.com>
Date: Wed, 15 Apr 2026 15:22:11 -0400
Subject: [PATCH 3/3] 551:  implemented orderedComponents to reduce code
 duplication

---
 js/src/app/dashboard/Dashboard.page.tsx | 26 +++++++++++--------------
 1 file changed, 11 insertions(+), 15 deletions(-)

diff --git a/js/src/app/dashboard/Dashboard.page.tsx b/js/src/app/dashboard/Dashboard.page.tsx
index 8fef0f36b..39afc8da3 100644
--- a/js/src/app/dashboard/Dashboard.page.tsx
+++ b/js/src/app/dashboard/Dashboard.page.tsx
@@ -63,30 +63,26 @@ export default function DashboardPage() {
             : <RefreshSubmissions schoolRegistered={schoolRegistered} />}
           </Center>
           <Flex direction={smallPhone ? "row" : "column"} gap={"md"}>
-            {smallPhone ?
-              <>
-                <Flex direction={"column"} flex={1}>
-                  <ProblemOfTheDay />
-                </Flex>
-                <Flex direction={"column"} flex={1}>
-                  <DashboardLeaderboard
-                    userId={data.user.id}
-                    userTags={data.user.tags}
-                  />
-                </Flex>
-              </>
-            : <>
+            {(() => {
+              const leaderboardCard = (
                 <Flex direction={"column"} flex={1}>
                   <DashboardLeaderboard
                     userId={data.user.id}
                     userTags={data.user.tags}
                   />
                 </Flex>
+              );
+              const problemOfTheDayCard = (
                 <Flex direction={"column"} flex={1}>
                   <ProblemOfTheDay />
                 </Flex>
-              </>
-            }
+              );
+              const orderedComponents =
+                smallPhone ?
+                  [problemOfTheDayCard, leaderboardCard]
+                : [leaderboardCard, problemOfTheDayCard];
+              return <>{orderedComponents}</>;
+            })()}
             <Flex direction={"column"} flex={1}>
               <RecentSubmissions userId={data.user.id} />
             </Flex>