diff --git a/spotlight-client/src/OtherNarrativeLinks/OtherNarrativeLinks.tsx b/spotlight-client/src/OtherNarrativeLinks/OtherNarrativeLinks.tsx index 8410b411..ab6c646b 100644 --- a/spotlight-client/src/OtherNarrativeLinks/OtherNarrativeLinks.tsx +++ b/spotlight-client/src/OtherNarrativeLinks/OtherNarrativeLinks.tsx @@ -31,6 +31,11 @@ import Arrow from "../UiLibrary/Arrow"; // grid styles adapted from IE-safe auto placement grid // https://css-tricks.com/css-grid-in-ie-faking-an-auto-placement-grid-with-gaps/ +const Wrapper = styled.div` + /* prevents the trailing grid gaps from pushing other stuff around */ + overflow: hidden; +`; + const LinkList = styled.ul` display: flex; flex-wrap: wrap; @@ -120,17 +125,19 @@ const OtherNarrativeLinks = (): React.ReactElement | null => { .filter((narrative) => narrative.id !== currentNarrativeTypeId); return ( - - {narrativesToDisplay.map((narrative) => { - return ( - - ); - })} - + + + {narrativesToDisplay.map((narrative) => { + return ( + + ); + })} + + ); }; diff --git a/spotlight-client/src/PageTenant/PageTenant.tsx b/spotlight-client/src/PageTenant/PageTenant.tsx index 574c0b4f..f914694e 100644 --- a/spotlight-client/src/PageTenant/PageTenant.tsx +++ b/spotlight-client/src/PageTenant/PageTenant.tsx @@ -23,22 +23,30 @@ import React from "react"; import styled from "styled-components/macro"; import OtherNarrativeLinks from "../OtherNarrativeLinks"; import { useDataStore } from "../StoreProvider"; -import { CopyBlock, PageSection, typefaces } from "../UiLibrary"; +import { breakpoints, CopyBlock, PageSection, typefaces } from "../UiLibrary"; import withRouteSync from "../withRouteSync"; const Introduction = styled(PageSection)` - margin: ${rem(160)} 0; + margin: ${rem(48)} 0; + + @media screen and (min-width: ${breakpoints.tablet[0]}px) { + margin: ${rem(160)} 0; + } `; const Links = styled(PageSection)``; const Title = styled.h1` font-family: ${typefaces.display}; - font-size: ${rem(52)}; + font-size: ${rem(32)}; letter-spacing: -0.04em; line-height: 1.4; margin-bottom: ${rem(32)}; max-width: ${rem(760)}; + + @media screen and (min-width: ${breakpoints.tablet[0]}px) { + font-size: ${rem(52)}; + } `; const Description = styled(CopyBlock)` diff --git a/spotlight-client/src/SiteNavigation/SiteNavigation.test.tsx b/spotlight-client/src/SiteNavigation/SiteNavigation.test.tsx index 3b47b18e..4009fbe8 100644 --- a/spotlight-client/src/SiteNavigation/SiteNavigation.test.tsx +++ b/spotlight-client/src/SiteNavigation/SiteNavigation.test.tsx @@ -143,6 +143,7 @@ describe("on small screens", () => { expect(menu).toHaveAttribute("aria-hidden", "false"); }); - expect.hasAssertions(); + fireEvent.click(screen.getByRole("link", { name: "Spotlight" })); + expect(menu).toHaveAttribute("aria-hidden", "true"); }); }); diff --git a/spotlight-client/src/SiteNavigation/SiteNavigationMobile.tsx b/spotlight-client/src/SiteNavigation/SiteNavigationMobile.tsx index c0c147c0..d04c755f 100644 --- a/spotlight-client/src/SiteNavigation/SiteNavigationMobile.tsx +++ b/spotlight-client/src/SiteNavigation/SiteNavigationMobile.tsx @@ -100,7 +100,10 @@ const SiteNavigation: React.FC = () => { - + setExpanded(false)} + to={getUrlForResource({ page: "home" })} + >