Fixes top margin at <md breakpoint (#2636)

* Top margin at <md breakpoint

* Update breakpoint for nav and scroll padding

* Set header height values locally

* Use px unit for multiline string css

* Use constants in page wrapper

* Fix import

Author: jonkafton

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"
@@ -99,16 +100,16 @@ const DashboardGridItem = styled.div({
   },
 })
 
-const ProfileSidebar = styled(Card)(({ theme }) => ({
+const ProfileSidebar = styled(Card)({
   position: "sticky",
-  top: `${theme.custom.dimensions.headerHeight + PADDING_TOP}px`,
+  top: `${HEADER_HEIGHT + PADDING_TOP}px`,
   display: "flex",
   flexDirection: "column",
   alignItems: "flex-start",
   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",

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",
-  [theme.breakpoints.down("sm")]: {
-    marginTop: "60px",
-    height: "calc(100vh - 60px)",
+  height: `calc(100vh - ${HEADER_HEIGHT}px)`,
+  marginTop: HEADER_HEIGHT,
+  [theme.breakpoints.down("md")]: {
+    marginTop: HEADER_HEIGHT_MD,
+    height: `calc(100vh - ${HEADER_HEIGHT_MD}px)`,
   },
 }))
 

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",
   },
 }))

frontends/ol-components/src/components/NavDrawer/NavDrawer.tsx

@@ -6,15 +6,19 @@ 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 "../ThemeProvider/MITLearnGlobalStyles"
 
 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("sm")]: {
-    paddingTop: theme.custom.dimensions.headerHeightSm,
+  [theme.breakpoints.down("md")]: {
+    paddingTop: HEADER_HEIGHT_MD,
   },
 }))
 

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};
-    ${theme.breakpoints.down("sm")} {
-      scroll-padding-top: ${theme.custom.dimensions.headerHeightSm};
+    scroll-padding-top: ${HEADER_HEIGHT}px;
+    ${theme.breakpoints.down("md")} {
+      scroll-padding-top: ${HEADER_HEIGHT_MD}px;
     }
   }
 

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"