From b5d311079307589f0e59d7e80ac80fdf4cd23607 Mon Sep 17 00:00:00 2001 From: 1o8ryan <1o8zhouryan@gmail.com> Date: Sun, 25 Oct 2026 11:13:23 -0400 Subject: [PATCH 1/4] Ordered the dashboard different when in mobile view and resized the problem of the day to clear dead space when in mobile view --- js/src/app/dashboard/Dashboard.page.tsx | 40 +++++++++++++------ .../ProblemOfTheDay/ProblemOfTheDay.tsx | 4 +- 2 files changed, 29 insertions(+), 15 deletions(-) diff --git a/js/src/app/dashboard/Dashboard.page.tsx b/js/src/app/dashboard/Dashboard.page.tsx index 6b092646d..16bca41b6 100644 --- a/js/src/app/dashboard/Dashboard.page.tsx +++ b/js/src/app/dashboard/Dashboard.page.tsx @@ -62,19 +62,33 @@ export default function DashboardPage() { : } - - - - - - - - - - + +
+ + + +
+
+ + + +
+
+ + + +
diff --git a/js/src/app/dashboard/_components/ProblemOfTheDay/ProblemOfTheDay.tsx b/js/src/app/dashboard/_components/ProblemOfTheDay/ProblemOfTheDay.tsx index 83b8b6b78..493d8044e 100644 --- a/js/src/app/dashboard/_components/ProblemOfTheDay/ProblemOfTheDay.tsx +++ b/js/src/app/dashboard/_components/ProblemOfTheDay/ProblemOfTheDay.tsx @@ -40,7 +40,7 @@ export default function ProblemOfTheDay() { const json = data.payload; return ( - +
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} From a34b3cb31e6abe953918c7ddd1cd78648a855add Mon Sep 17 00:00:00 2001 From: 1o8ryan <1o8zhouryan@gmail.com> Date: Tue, 27 Oct 2026 21:08:00 -0400 Subject: [PATCH 2/4] DINO-1049: Formatted view for the dashboard only in mobile --- js/src/app/dashboard/Dashboard.page.tsx | 47 +++++++++++-------- .../ProblemOfTheDay/ProblemOfTheDay.tsx | 2 +- 2 files changed, 29 insertions(+), 20 deletions(-) diff --git a/js/src/app/dashboard/Dashboard.page.tsx b/js/src/app/dashboard/Dashboard.page.tsx index 16bca41b6..ac9214dc2 100644 --- a/js/src/app/dashboard/Dashboard.page.tsx +++ b/js/src/app/dashboard/Dashboard.page.tsx @@ -46,6 +46,22 @@ export default function DashboardPage() { /> ); } + + const problemOfTheDaySection = ( + <div> + <Flex direction={"column"}> + <ProblemOfTheDay /> + </Flex> + </div> + ); + const leaderboardSection = ( + <div> + <Flex direction={"column"} flex={1}> + <DashboardLeaderboard userId={data.user.id} userTags={data.user.tags} /> + </Flex> + </div> + ); + return ( <> <DocumentTitle title={`CodeBloom - Dashboard`} /> @@ -65,26 +81,19 @@ export default function DashboardPage() { <Flex direction={smallPhone ? "row" : "column"} gap={"md"} - align="flex-start" + align={smallPhone ? "flex-start" : "stretch"} > - <div - style={{ - order: smallPhone ? 1 : 2, - }} - > - <Flex direction={"column"}> - <ProblemOfTheDay /> - </Flex> - </div> - <div style={{ order: smallPhone ? 2 : 1 }}> - <Flex direction={"column"} flex={1}> - <DashboardLeaderboard - userId={data.user.id} - userTags={data.user.tags} - /> - </Flex> - </div> - <div style={{ order: 3 }}> + {smallPhone ? + <> + {problemOfTheDaySection} + {leaderboardSection} + </> + : <> + {leaderboardSection} + {problemOfTheDaySection} + </> + } + <div> <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 493d8044e..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"} From 634a43151bd3b4eb7139be605d81243cd7a4b595 Mon Sep 17 00:00:00 2001 From: 1o8ryan <1o8zhouryan@gmail.com> Date: Tue, 27 Oct 2026 21:19:25 -0400 Subject: [PATCH 3/4] fixed it so it should pass SonarQube Cloud --- js/src/app/dashboard/Dashboard.page.tsx | 53 ++++++++++++++++--------- 1 file changed, 34 insertions(+), 19 deletions(-) diff --git a/js/src/app/dashboard/Dashboard.page.tsx b/js/src/app/dashboard/Dashboard.page.tsx index ac9214dc2..78ba0efdb 100644 --- a/js/src/app/dashboard/Dashboard.page.tsx +++ b/js/src/app/dashboard/Dashboard.page.tsx @@ -47,21 +47,6 @@ export default function DashboardPage() { ); } - const problemOfTheDaySection = ( - <div> - <Flex direction={"column"}> - <ProblemOfTheDay /> - </Flex> - </div> - ); - const leaderboardSection = ( - <div> - <Flex direction={"column"} flex={1}> - <DashboardLeaderboard userId={data.user.id} userTags={data.user.tags} /> - </Flex> - </div> - ); - return ( <> <DocumentTitle title={`CodeBloom - Dashboard`} /> @@ -85,12 +70,42 @@ export default function DashboardPage() { > {smallPhone ? <> - {problemOfTheDaySection} - {leaderboardSection} + { + <div> + <Flex direction={"column"}> + <ProblemOfTheDay /> + </Flex> + </div> + } + { + <div> + <Flex direction={"column"} flex={1}> + <DashboardLeaderboard + userId={data.user.id} + userTags={data.user.tags} + /> + </Flex> + </div> + } </> : <> - {leaderboardSection} - {problemOfTheDaySection} + { + <div> + <Flex direction={"column"} flex={1}> + <DashboardLeaderboard + userId={data.user.id} + userTags={data.user.tags} + /> + </Flex> + </div> + } + { + <div> + <Flex direction={"column"}> + <ProblemOfTheDay /> + </Flex> + </div> + } </> } <div> From 99b5c49261002546923d9a6ff9a6926b57565039 Mon Sep 17 00:00:00 2001 From: 1o8ryan <1o8zhouryan@gmail.com> Date: Thu, 29 Oct 2026 00:56:44 -0400 Subject: [PATCH 4/4] removed the normal and used flex hopefully this resolves matine problems --- js/src/app/dashboard/Dashboard.page.tsx | 44 ++++++++++--------------- 1 file changed, 18 insertions(+), 26 deletions(-) diff --git a/js/src/app/dashboard/Dashboard.page.tsx b/js/src/app/dashboard/Dashboard.page.tsx index 78ba0efdb..545cccee9 100644 --- a/js/src/app/dashboard/Dashboard.page.tsx +++ b/js/src/app/dashboard/Dashboard.page.tsx @@ -71,40 +71,32 @@ export default function DashboardPage() { {smallPhone ? <> { - <div> - <Flex direction={"column"}> - <ProblemOfTheDay /> - </Flex> - </div> + <Flex direction={"column"}> + <ProblemOfTheDay /> + </Flex> } { - <div> - <Flex direction={"column"} flex={1}> - <DashboardLeaderboard - userId={data.user.id} - userTags={data.user.tags} - /> - </Flex> - </div> + <Flex direction={"column"} flex={1}> + <DashboardLeaderboard + userId={data.user.id} + userTags={data.user.tags} + /> + </Flex> } </> : <> { - <div> - <Flex direction={"column"} flex={1}> - <DashboardLeaderboard - userId={data.user.id} - userTags={data.user.tags} - /> - </Flex> - </div> + <Flex direction={"column"} flex={1}> + <DashboardLeaderboard + userId={data.user.id} + userTags={data.user.tags} + /> + </Flex> } { - <div> - <Flex direction={"column"}> - <ProblemOfTheDay /> - </Flex> - </div> + <Flex direction={"column"}> + <ProblemOfTheDay /> + </Flex> } </> }