From c7ec91f03a024e7c3efd3b4e02cb73c8feec3e16 Mon Sep 17 00:00:00 2001 From: Jon Kafton <939376+jonkafton@users.noreply.github.com> Date: Mon, 27 Oct 2025 15:03:02 +0100 Subject: [PATCH 1/6] Top margin at ({ flexDirection: "column", height: "calc(100vh - 72px)", marginTop: "72px", - [theme.breakpoints.down("sm")]: { + [theme.breakpoints.down("md")]: { marginTop: "60px", height: "calc(100vh - 60px)", }, From 2c43c171a53264c2581f5a97d9d0b89a894cc856 Mon Sep 17 00:00:00 2001 From: Jon Kafton <939376+jonkafton@users.noreply.github.com> Date: Mon, 27 Oct 2025 15:36:30 +0100 Subject: [PATCH 2/6] Update breakpoint for nav and scroll padding --- frontends/ol-components/src/components/NavDrawer/NavDrawer.tsx | 2 +- .../src/components/ThemeProvider/MITLearnGlobalStyles.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/frontends/ol-components/src/components/NavDrawer/NavDrawer.tsx b/frontends/ol-components/src/components/NavDrawer/NavDrawer.tsx index 337732fae3..dc7b1daa64 100644 --- a/frontends/ol-components/src/components/NavDrawer/NavDrawer.tsx +++ b/frontends/ol-components/src/components/NavDrawer/NavDrawer.tsx @@ -13,7 +13,7 @@ const DrawerContent = styled.div(({ theme }) => ({ height: "100%", background: theme.custom.colors.white, borderRight: `1px solid ${theme.custom.colors.lightGray2}`, - [theme.breakpoints.down("sm")]: { + [theme.breakpoints.down("md")]: { paddingTop: theme.custom.dimensions.headerHeightSm, }, })) diff --git a/frontends/ol-components/src/components/ThemeProvider/MITLearnGlobalStyles.tsx b/frontends/ol-components/src/components/ThemeProvider/MITLearnGlobalStyles.tsx index f8095f3358..de2b5ccc87 100644 --- a/frontends/ol-components/src/components/ThemeProvider/MITLearnGlobalStyles.tsx +++ b/frontends/ol-components/src/components/ThemeProvider/MITLearnGlobalStyles.tsx @@ -8,7 +8,7 @@ const pageCss = (theme: Theme) => css` font-family: ${theme.typography.body1.fontFamily}; color: ${theme.typography.body1.color}; scroll-padding-top: ${theme.custom.dimensions.headerHeight}; - ${theme.breakpoints.down("sm")} { + ${theme.breakpoints.down("md")} { scroll-padding-top: ${theme.custom.dimensions.headerHeightSm}; } } From e8d01d21e47cfba4766651cfdba3afc641823536 Mon Sep 17 00:00:00 2001 From: Jon Kafton <939376+jonkafton@users.noreply.github.com> Date: Mon, 27 Oct 2025 15:52:30 +0100 Subject: [PATCH 3/6] Set header height values locally --- .../src/app-pages/DashboardPage/DashboardLayout.tsx | 3 ++- .../main/src/page-components/Header/Header.tsx | 13 ++++++++++--- .../src/components/NavDrawer/NavDrawer.tsx | 5 +++-- .../ThemeProvider/MITLearnGlobalStyles.tsx | 7 +++++-- frontends/ol-components/src/index.ts | 2 +- 5 files changed, 21 insertions(+), 9 deletions(-) diff --git a/frontends/main/src/app-pages/DashboardPage/DashboardLayout.tsx b/frontends/main/src/app-pages/DashboardPage/DashboardLayout.tsx index acf746a692..c88fafa4e8 100644 --- a/frontends/main/src/app-pages/DashboardPage/DashboardLayout.tsx +++ b/frontends/main/src/app-pages/DashboardPage/DashboardLayout.tsx @@ -19,6 +19,7 @@ import { TabList, Typography, styled, + HEADER_HEIGHT, } from "ol-components" import { TabButtonLink, TabButtonList } from "@mitodl/smoot-design" import Link from "next/link" @@ -101,7 +102,7 @@ const DashboardGridItem = styled.div({ const ProfileSidebar = styled(Card)(({ theme }) => ({ position: "sticky", - top: `${theme.custom.dimensions.headerHeight + PADDING_TOP}px`, + top: `${HEADER_HEIGHT + PADDING_TOP}px`, display: "flex", flexDirection: "column", alignItems: "flex-start", diff --git a/frontends/main/src/page-components/Header/Header.tsx b/frontends/main/src/page-components/Header/Header.tsx index 7163a51804..7ea077a731 100644 --- a/frontends/main/src/page-components/Header/Header.tsx +++ b/frontends/main/src/page-components/Header/Header.tsx @@ -2,7 +2,14 @@ import React, { FunctionComponent } from "react" import type { NavData } from "ol-components" -import { styled, AppBar, NavDrawer, Toolbar } from "ol-components" +import { + styled, + AppBar, + NavDrawer, + Toolbar, + HEADER_HEIGHT, + HEADER_HEIGHT_MD, +} from "ol-components" import { ActionButtonLink } from "@mitodl/smoot-design" import { RiSearch2Line, @@ -50,9 +57,9 @@ const Bar = styled(AppBar)(({ theme }) => ({ ".MuiToolbar-root": { minHeight: "auto", }, - height: theme.custom.dimensions.headerHeight, + height: HEADER_HEIGHT, [theme.breakpoints.down("md")]: { - height: theme.custom.dimensions.headerHeightSm, + height: HEADER_HEIGHT_MD, padding: "0", }, })) diff --git a/frontends/ol-components/src/components/NavDrawer/NavDrawer.tsx b/frontends/ol-components/src/components/NavDrawer/NavDrawer.tsx index dc7b1daa64..e8332820e6 100644 --- a/frontends/ol-components/src/components/NavDrawer/NavDrawer.tsx +++ b/frontends/ol-components/src/components/NavDrawer/NavDrawer.tsx @@ -6,15 +6,16 @@ import Link from "next/link" import React, { ReactElement } from "react" import { RiCloseLargeLine } from "@remixicon/react" import { ActionButton } from "@mitodl/smoot-design" +import { HEADER_HEIGHT, HEADER_HEIGHT_MD } from "ol-components" const DrawerContent = styled.div(({ theme }) => ({ - paddingTop: theme.custom.dimensions.headerHeight, + paddingTop: HEADER_HEIGHT, width: "366px", height: "100%", background: theme.custom.colors.white, borderRight: `1px solid ${theme.custom.colors.lightGray2}`, [theme.breakpoints.down("md")]: { - paddingTop: theme.custom.dimensions.headerHeightSm, + paddingTop: HEADER_HEIGHT_MD, }, })) diff --git a/frontends/ol-components/src/components/ThemeProvider/MITLearnGlobalStyles.tsx b/frontends/ol-components/src/components/ThemeProvider/MITLearnGlobalStyles.tsx index de2b5ccc87..0dcf07c383 100644 --- a/frontends/ol-components/src/components/ThemeProvider/MITLearnGlobalStyles.tsx +++ b/frontends/ol-components/src/components/ThemeProvider/MITLearnGlobalStyles.tsx @@ -3,13 +3,16 @@ import React from "react" import { css, Global, Theme } from "@emotion/react" +export const HEADER_HEIGHT = 72 +export const HEADER_HEIGHT_MD = 60 + const pageCss = (theme: Theme) => css` html { font-family: ${theme.typography.body1.fontFamily}; color: ${theme.typography.body1.color}; - scroll-padding-top: ${theme.custom.dimensions.headerHeight}; + scroll-padding-top: ${HEADER_HEIGHT}; ${theme.breakpoints.down("md")} { - scroll-padding-top: ${theme.custom.dimensions.headerHeightSm}; + scroll-padding-top: ${HEADER_HEIGHT_MD}; } } diff --git a/frontends/ol-components/src/index.ts b/frontends/ol-components/src/index.ts index 4c48069bba..fddd94de71 100644 --- a/frontends/ol-components/src/index.ts +++ b/frontends/ol-components/src/index.ts @@ -167,7 +167,7 @@ export { Link, linkStyles } from "./components/Link/Link" export type { LinkProps } from "./components/Link/Link" export { pxToRem } from "./components/ThemeProvider/typography" -export { MITLearnGlobalStyles } from "./components/ThemeProvider/MITLearnGlobalStyles" +export * from "./components/ThemeProvider/MITLearnGlobalStyles" export { AppRouterCacheProvider as NextJsAppRouterCacheProvider } from "@mui/material-nextjs/v15-appRouter" From 0f0a6d3c9331b72cab7653942762b0ef5e9c9339 Mon Sep 17 00:00:00 2001 From: Jon Kafton <939376+jonkafton@users.noreply.github.com> Date: Mon, 27 Oct 2025 15:58:18 +0100 Subject: [PATCH 4/6] Use px unit for multiline string css --- .../src/components/ThemeProvider/MITLearnGlobalStyles.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontends/ol-components/src/components/ThemeProvider/MITLearnGlobalStyles.tsx b/frontends/ol-components/src/components/ThemeProvider/MITLearnGlobalStyles.tsx index 0dcf07c383..7f4e3a4c45 100644 --- a/frontends/ol-components/src/components/ThemeProvider/MITLearnGlobalStyles.tsx +++ b/frontends/ol-components/src/components/ThemeProvider/MITLearnGlobalStyles.tsx @@ -10,9 +10,9 @@ const pageCss = (theme: Theme) => css` html { font-family: ${theme.typography.body1.fontFamily}; color: ${theme.typography.body1.color}; - scroll-padding-top: ${HEADER_HEIGHT}; + scroll-padding-top: ${HEADER_HEIGHT}px; ${theme.breakpoints.down("md")} { - scroll-padding-top: ${HEADER_HEIGHT_MD}; + scroll-padding-top: ${HEADER_HEIGHT_MD}px; } } From 6e7cf6a5d3da4e4ff3137565f73193d53fb4cef6 Mon Sep 17 00:00:00 2001 From: Jon Kafton <939376+jonkafton@users.noreply.github.com> Date: Mon, 27 Oct 2025 16:09:56 +0100 Subject: [PATCH 5/6] Use constants in page wrapper --- .../src/app-pages/DashboardPage/DashboardLayout.tsx | 4 ++-- frontends/main/src/app/styled.tsx | 10 +++++----- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/frontends/main/src/app-pages/DashboardPage/DashboardLayout.tsx b/frontends/main/src/app-pages/DashboardPage/DashboardLayout.tsx index c88fafa4e8..089bed0baa 100644 --- a/frontends/main/src/app-pages/DashboardPage/DashboardLayout.tsx +++ b/frontends/main/src/app-pages/DashboardPage/DashboardLayout.tsx @@ -100,7 +100,7 @@ const DashboardGridItem = styled.div({ }, }) -const ProfileSidebar = styled(Card)(({ theme }) => ({ +const ProfileSidebar = styled(Card)({ position: "sticky", top: `${HEADER_HEIGHT + PADDING_TOP}px`, display: "flex", @@ -109,7 +109,7 @@ const ProfileSidebar = styled(Card)(({ theme }) => ({ width: "300px", boxShadow: "-4px 4px 0px 0px #A31F34", transform: "translateX(4px)", // keep solid shadow from bleeding into page margins -})) +}) const ProfilePhotoContainer = styled.div(({ theme }) => ({ display: "flex", diff --git a/frontends/main/src/app/styled.tsx b/frontends/main/src/app/styled.tsx index 239b627f22..fe5143a9bb 100644 --- a/frontends/main/src/app/styled.tsx +++ b/frontends/main/src/app/styled.tsx @@ -1,6 +1,6 @@ "use client" -import { styled } from "ol-components" +import { styled, HEADER_HEIGHT, HEADER_HEIGHT_MD } from "ol-components" /* * Use in server components gives: @@ -11,11 +11,11 @@ import { styled } from "ol-components" export const PageWrapper = styled.div(({ theme }) => ({ display: "flex", flexDirection: "column", - height: "calc(100vh - 72px)", - marginTop: "72px", + height: `calc(100vh - ${HEADER_HEIGHT}px)`, + marginTop: HEADER_HEIGHT, [theme.breakpoints.down("md")]: { - marginTop: "60px", - height: "calc(100vh - 60px)", + marginTop: HEADER_HEIGHT_MD, + height: `calc(100vh - ${HEADER_HEIGHT_MD}px)`, }, })) From e8868c1e8c184ce60fe766b7e805eede9ba59838 Mon Sep 17 00:00:00 2001 From: Jon Kafton <939376+jonkafton@users.noreply.github.com> Date: Mon, 27 Oct 2025 16:18:44 +0100 Subject: [PATCH 6/6] Fix import --- .../ol-components/src/components/NavDrawer/NavDrawer.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/frontends/ol-components/src/components/NavDrawer/NavDrawer.tsx b/frontends/ol-components/src/components/NavDrawer/NavDrawer.tsx index e8332820e6..7e1aba3809 100644 --- a/frontends/ol-components/src/components/NavDrawer/NavDrawer.tsx +++ b/frontends/ol-components/src/components/NavDrawer/NavDrawer.tsx @@ -6,7 +6,10 @@ import Link from "next/link" import React, { ReactElement } from "react" import { RiCloseLargeLine } from "@remixicon/react" import { ActionButton } from "@mitodl/smoot-design" -import { HEADER_HEIGHT, HEADER_HEIGHT_MD } from "ol-components" +import { + HEADER_HEIGHT, + HEADER_HEIGHT_MD, +} from "../ThemeProvider/MITLearnGlobalStyles" const DrawerContent = styled.div(({ theme }) => ({ paddingTop: HEADER_HEIGHT,