dashboard my lists style fixes (#1107)

* make tab panel 100% width * fix padding on the top of my lists component
mitodl · Jun 18, 2024 · 44d5812 · 44d5812
1 parent 5fccaa2
commit 44d5812
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 6 deletions.
diff --git a/frontends/mit-open/src/pages/DashboardPage/DashboardPage.tsx b/frontends/mit-open/src/pages/DashboardPage/DashboardPage.tsx
@@ -206,6 +206,7 @@ const LinkText = styled(Typography)(({ theme }) => ({
 
 const TabPanelStyled = styled(TabPanel)({
   padding: "0",
+  width: "100%",
 })
 
 const TitleText = styled(Typography)(({ theme }) => ({

diff --git a/frontends/mit-open/src/pages/UserListListingPage/UserListListingPage.tsx b/frontends/mit-open/src/pages/UserListListingPage/UserListListingPage.tsx
@@ -28,10 +28,13 @@ import { useNavigate } from "react-router"
 import * as urls from "@/common/urls"
 import { manageListDialogs } from "@/page-components/ManageListDialogs/ManageListDialogs"
 
-const ListHeaderGrid = styled(Grid)`
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-`
+const PageContainer = styled(Container)({
+  marginTop: "1rem",
+})
+
+const ListHeaderGrid = styled(Grid)({
+  marginBottom: "1rem",
+})
 
 type EditUserListMenuProps = {
   userList: UserList
@@ -164,12 +167,12 @@ const UserListListingPage: React.FC = () => {
       <MetaTags>
         <title>User Lists</title>
       </MetaTags>
-      <Container maxWidth="sm">
+      <PageContainer maxWidth="sm">
         <UserListListingComponent
           title="User Lists"
           onActivate={handleActivate}
         />
-      </Container>
+      </PageContainer>
     </BannerPage>
   )
 }