Improve Dashboard Layout / Fix card Overflows (#2365)

ChristopherChudzicki · web-flow · commit ef3d1ed47184 · 2025-07-18T14:35:05.000-04:00
* fix key conflict issues

* Reduce minimum margins on dashboard layout

Previously, dashboard layout minimum margin was effectively 108px on
each side. This changes the minimum margin to 24px on both sides,
in-line with the rest of the application.
diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.tsx b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.tsx
@@ -139,7 +139,7 @@ const EnrollmentExpandCollapse: React.FC<EnrollmentExpandCollapseProps> = ({
       <EnrollmentsList itemSpacing={"16px"}>
         {shownEnrollments.map((course) => (
           <DashboardCardStyled
-            key={course.id}
+            key={course.key}
             Component="li"
             dashboardResource={course}
             showNotComplete={false}
@@ -153,7 +153,7 @@ const EnrollmentExpandCollapse: React.FC<EnrollmentExpandCollapseProps> = ({
             <HiddenEnrollmentsList itemSpacing={"16px"}>
               {hiddenEnrollments.map((course) => (
                 <DashboardCardStyled
-                  key={course.id}
+                  key={course.key}
                   Component="li"
                   dashboardResource={course}
                   showNotComplete={false}
diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/test-utils.ts b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/test-utils.ts
@@ -19,7 +19,7 @@ const makeGrade = factories.enrollment.grade
 const dashboardCourse: PartialFactory<DashboardCourse> = (...overrides) => {
   return mergeOverrides<DashboardCourse>(
     {
-      id: faker.string.uuid(),
+      key: faker.string.uuid(),
       coursewareId: faker.string.uuid(),
       type: DashboardResourceType.Course,
       title: faker.commerce.productName(),
diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/transform.test.tsx b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/transform.test.tsx
@@ -29,7 +29,7 @@ describe("Transforming mitxonline enrollment data to DashboardResource", () => {
       const transformed = transform.mitxonlineEnrollments([apiData])
       expect(transformed).toHaveLength(1)
       expect(transformed[0]).toEqual({
-        id: `mitxonline-course-${apiData.run.course.id}`,
+        key: `mitxonline-course-${apiData.run.course.id}-${apiData.run.id}`,
         coursewareId: apiData.run.courseware_id ?? null,
         type: DashboardResourceType.Course,
         title: apiData.run.title,
@@ -79,16 +79,20 @@ describe("Transforming mitxonline enrollment data to DashboardResource", () => {
       }),
     ]
 
+    const transformedCourses = mitxonlineCourses({
+      courses: coursesA,
+      enrollments,
+    })
     const sortedCourses = sortDashboardCourses(
       mitxonlineProgram(programA),
-      mitxonlineCourses({ courses: coursesA, enrollments }),
+      transformedCourses,
     )
 
-    expect(sortedCourses.map((course) => course.id)).toEqual([
-      `mitxonline-course-${coursesA[1].id}`, // Enrolled course
-      `mitxonline-course-${coursesA[0].id}`, // Completed course
-      `mitxonline-course-${coursesA[2].id}`, // Not enrolled course
-      `mitxonline-course-${coursesA[3].id}`, // Not enrolled course
+    expect(sortedCourses).toEqual([
+      transformedCourses[1], // Enrolled course
+      transformedCourses[0], // Completed course
+      transformedCourses[2], // Not enrolled course
+      transformedCourses[3], // Not enrolled course
     ])
   })
 })
diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/transform.ts b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/transform.ts
@@ -17,16 +17,26 @@ import { groupBy } from "lodash"
 const sources = {
   mitxonline: "mitxonline",
 }
-const getId = (
-  source: string,
-  resourceType: DashboardResourceType,
-  id: number,
-) => `${source}-${resourceType}-${id}`
+type KeyOpts = {
+  source: string
+  resourceType: DashboardResourceType
+  id: number
+  runId?: number
+}
+const getKey = ({ source, resourceType, id, runId }: KeyOpts) => {
+  const base = `${source}-${resourceType}-${id}`
+  return runId ? `${base}-${runId}` : base
+}
 
 const mitxonlineEnrollment = (raw: CourseRunEnrollment): DashboardCourse => {
   const course = raw.run.course
   return {
-    id: getId(sources.mitxonline, DashboardResourceType.Course, course.id),
+    key: getKey({
+      source: sources.mitxonline,
+      resourceType: DashboardResourceType.Course,
+      id: course.id,
+      runId: raw.run.id,
+    }),
     coursewareId: raw.run.courseware_id ?? null,
     type: DashboardResourceType.Course,
     title: course.title,
@@ -57,7 +67,12 @@ const mitxonlineUnenrolledCourse = (
 ): DashboardCourse => {
   const run = course.courseruns.find((run) => run.id === course.next_run_id)
   return {
-    id: getId(sources.mitxonline, DashboardResourceType.Course, course.id),
+    key: getKey({
+      source: sources.mitxonline,
+      resourceType: DashboardResourceType.Course,
+      id: course.id,
+      runId: run?.id,
+    }),
     coursewareId: run?.courseware_id ?? null,
     type: DashboardResourceType.Course,
     title: course.title,
@@ -100,7 +115,11 @@ const mitxonlineCourses = (raw: {
 
 const mitxonlineProgram = (raw: V2Program): DashboardProgram => {
   return {
-    id: getId(sources.mitxonline, DashboardResourceType.Program, raw.id),
+    key: getKey({
+      source: sources.mitxonline,
+      resourceType: DashboardResourceType.Program,
+      id: raw.id,
+    }),
     type: DashboardResourceType.Program,
     title: raw.title,
     programType: raw.program_type,
@@ -113,7 +132,7 @@ const sortDashboardCourses = (
   program: DashboardProgram,
   courses: DashboardCourse[],
 ) => {
-  return courses.sort((a, b) => {
+  return [...courses].sort((a, b) => {
     const aCompleted = a.enrollment?.status === EnrollmentStatus.Completed
     const bCompleted = b.enrollment?.status === EnrollmentStatus.Completed
     const aEnrolled = a.enrollment?.status === EnrollmentStatus.Enrolled
diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/types.ts b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/types.ts
@@ -19,7 +19,7 @@ const EnrollmentMode = {
 type EnrollmentMode = (typeof EnrollmentMode)[keyof typeof EnrollmentMode]
 
 type DashboardCourse = {
-  id: string
+  key: string
   coursewareId: string | null
   title: string
   type: typeof DashboardResourceType.Course
@@ -47,7 +47,7 @@ type DashboardCourseEnrollment = {
 }
 
 type DashboardProgram = {
-  id: string
+  key: string
   type: typeof DashboardResourceType.Program
   title: string
   programType?: string | null
diff --git a/frontends/main/src/app-pages/DashboardPage/DashboardLayout.tsx b/frontends/main/src/app-pages/DashboardPage/DashboardLayout.tsx
@@ -77,28 +77,14 @@ const Background = styled.div(({ theme }) => ({
   },
 }))
 
-const Page = styled.div(({ theme }) => ({
-  display: "flex",
-  flexDirection: "column",
-  alignItems: "flex-start",
-  padding: "40px 84px 80px 84px",
-  gap: "80px",
-  height: "100%",
-  [theme.breakpoints.down("md")]: {
-    padding: "0",
-    gap: "24px",
-  },
-}))
-
-const DashboardContainer = styled(Container)(({ theme }) => ({
-  [theme.breakpoints.down("md")]: {
-    padding: "24px 16px",
-    gap: "24px",
-  },
-}))
+const PageContainer = styled(Container)({
+  marginTop: "40px",
+  marginBottom: "80px",
+})
 
 const DashboardGrid = styled.div(({ theme }) => ({
   display: "grid",
+  width: "100%",
   gridTemplateColumns: "300px minmax(0, 1fr)",
   gap: "48px",
   [theme.breakpoints.down("md")]: {
@@ -114,17 +100,15 @@ const DashboardGridItem = styled.div({
   },
 })
 
-const ProfileSidebar = styled(Card)(({ theme }) => ({
+const ProfileSidebar = styled(Card)({
   position: "fixed",
   display: "flex",
   flexDirection: "column",
   alignItems: "flex-start",
   width: "300px",
   boxShadow: "-4px 4px 0px 0px #A31F34",
-  [theme.breakpoints.down("md")]: {
-    position: "relative",
-  },
-}))
+  transform: "translateX(4px)", // keep solid shadow from bleeding into page margins
+})
 
 const ProfilePhotoContainer = styled.div(({ theme }) => ({
   display: "flex",
@@ -382,22 +366,20 @@ const DashboardPage: React.FC<{
 
   return (
     <Background>
-      <Page>
-        <LearningResourceDrawer />
-        <DashboardContainer>
-          <DashboardGrid>
-            <TabContext value={tabValue}>
-              <DashboardGridItem>
-                <MobileOnly>{mobileTabs}</MobileOnly>
-                <DesktopOnly>{desktopTabs}</DesktopOnly>
-              </DashboardGridItem>
-              <DashboardGridItem>
-                <TabPanelStyled value={tabValue}>{children}</TabPanelStyled>
-              </DashboardGridItem>
-            </TabContext>
-          </DashboardGrid>
-        </DashboardContainer>
-      </Page>
+      <PageContainer>
+        <DashboardGrid>
+          <TabContext value={tabValue}>
+            <DashboardGridItem>
+              <MobileOnly>{mobileTabs}</MobileOnly>
+              <DesktopOnly>{desktopTabs}</DesktopOnly>
+            </DashboardGridItem>
+            <DashboardGridItem>
+              <TabPanelStyled value={tabValue}>{children}</TabPanelStyled>
+            </DashboardGridItem>
+          </TabContext>
+        </DashboardGrid>
+      </PageContainer>
+      <LearningResourceDrawer />
     </Background>
   )
 }
diff --git a/frontends/main/src/app-pages/DashboardPage/OrganizationContent.tsx b/frontends/main/src/app-pages/DashboardPage/OrganizationContent.tsx
@@ -120,7 +120,7 @@ const OrgProgramDisplay: React.FC<{
         {transform.sortDashboardCourses(program, courses).map((course) => (
           <DashboardCardStyled
             Component="li"
-            key={course.id}
+            key={course.key}
             dashboardResource={course}
             courseNoun="Module"
             offerUpgrade={false}
@@ -178,7 +178,7 @@ const OrganizationContentInternal: React.FC<
             const programLoading = courseGroups[index].isLoading
             return (
               <OrgProgramDisplay
-                key={program.id}
+                key={program.key}
                 program={program}
                 courses={courses}
                 coursesLoading={courseGroups[index].isLoading}
diff --git a/frontends/main/src/components/GridLayout/GridLayout.tsx b/frontends/main/src/components/GridLayout/GridLayout.tsx
@@ -44,6 +44,8 @@ const columnVariants: Record<ColumnVariant, GridProps> = {
 /**
  * This is a thin wrapper around MUI's [Grid](https://mui.com/material-ui/react-grid/)
  * component specifying some app-specific props.
+ * @deprecated The grid presets in this component predates formal designs for
+ * MIT Learn site and should be avoided.
  */
 const GridContainer: React.FC<GridContainerProps> = (props) => (
   <Grid container columnSpacing={6} {...props} />
@@ -55,6 +57,9 @@ const GridContainer: React.FC<GridContainerProps> = (props) => (
  *
  * This is a thin wrapper around MUI's [Grid](https://mui.com/material-ui/react-grid/)
  * component. This is a `<Grid item />` with breakpoint widths specified by `variant`.
+ *
+ * @deprecated The grid presets in this component predates formal designs for
+ * MIT Learn site and should be avoided.
  */
 const GridColumn: React.FC<GridItemProps> = ({ variant, ...others }) => (
   <Grid item {...columnVariants[variant]} {...others} />
diff --git a/frontends/main/src/page-components/UserListListing/UserListListing.tsx b/frontends/main/src/page-components/UserListListing/UserListListing.tsx
@@ -12,7 +12,6 @@ import {
 import { Button } from "@mitodl/smoot-design"
 import { RiListCheck3 } from "@remixicon/react"
 import { useUserListList } from "api/hooks/userLists"
-import { GridColumn, GridContainer } from "@/components/GridLayout/GridLayout"
 import { manageListDialogs } from "@/page-components/ManageListDialogs/ManageListDialogs"
 import { userListView } from "@/common/urls"
 import UserListCardCondensed from "@/page-components/UserListCard/UserListCardCondensed"
@@ -71,55 +70,53 @@ const UserListListingComponent: React.FC<UserListListingComponentProps> = (
   }, [])
 
   return (
-    <GridContainer>
-      <GridColumn variant="single-full">
-        <Header component="h1" variant="h3">
-          {title}
-        </Header>
-        <section>
-          <LoadingSpinner loading={isLoading} />
-          {!data?.results.length && !isLoading ? (
-            <EmptyListCard>
-              <Card.Content>
-                <EmptyList>
-                  <IconContainer>
-                    <RiListCheck3 />
-                  </IconContainer>
-                  <Typography variant="body2">
-                    Create lists to save your courses and materials.
-                  </Typography>
-                  <Button variant="primary" size="large" onClick={handleCreate}>
-                    Create new list
-                  </Button>
-                </EmptyList>
-              </Card.Content>
-            </EmptyListCard>
-          ) : null}
-          {data ? (
-            <PlainList itemSpacing={3}>
-              {data.results?.map((list) => {
-                return (
-                  <li
-                    key={list.id}
-                    data-testid={`user-list-card-condensed-${list.id}`}
-                  >
-                    <UserListCardCondensed
-                      href={userListView(list.id)}
-                      userList={list}
-                    />
-                  </li>
-                )
-              })}
-            </PlainList>
-          ) : null}
-          {data?.results.length && !isLoading ? (
-            <NewListButton variant="primary" onClick={handleCreate}>
-              Create new list
-            </NewListButton>
-          ) : null}
-        </section>
-      </GridColumn>
-    </GridContainer>
+    <>
+      <Header component="h1" variant="h3">
+        {title}
+      </Header>
+      <section>
+        <LoadingSpinner loading={isLoading} />
+        {!data?.results.length && !isLoading ? (
+          <EmptyListCard>
+            <Card.Content>
+              <EmptyList>
+                <IconContainer>
+                  <RiListCheck3 />
+                </IconContainer>
+                <Typography variant="body2">
+                  Create lists to save your courses and materials.
+                </Typography>
+                <Button variant="primary" size="large" onClick={handleCreate}>
+                  Create new list
+                </Button>
+              </EmptyList>
+            </Card.Content>
+          </EmptyListCard>
+        ) : null}
+        {data ? (
+          <PlainList itemSpacing={3}>
+            {data.results?.map((list) => {
+              return (
+                <li
+                  key={list.id}
+                  data-testid={`user-list-card-condensed-${list.id}`}
+                >
+                  <UserListCardCondensed
+                    href={userListView(list.id)}
+                    userList={list}
+                  />
+                </li>
+              )
+            })}
+          </PlainList>
+        ) : null}
+        {data?.results.length && !isLoading ? (
+          <NewListButton variant="primary" onClick={handleCreate}>
+            Create new list
+          </NewListButton>
+        ) : null}
+      </section>
+    </>
   )
 }
 

Original file line number	Diff line number	Diff line change
`@@ -19,7 +19,7 @@ const makeGrade = factories.enrollment.grade`
`19`	`19`	`const dashboardCourse: PartialFactory<DashboardCourse> = (...overrides) => {`
`20`	`20`	`return mergeOverrides<DashboardCourse>(`
`21`	`21`	`{`
`22`		`- id: faker.string.uuid(),`
	`22`	`+ key: faker.string.uuid(),`
`23`	`23`	`coursewareId: faker.string.uuid(),`
`24`	`24`	`type: DashboardResourceType.Course,`
`25`	`25`	`title: faker.commerce.productName(),`