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