From fa5b9ad31b5c3baf620f4f109819c96fa93d51f2 Mon Sep 17 00:00:00 2001
From: Ian MacFarland <ian@recidiviz.org>
Date: Thu, 25 Feb 2021 17:10:23 -0800
Subject: [PATCH] mobile styles

---
 .../OtherNarrativeLinks.tsx                   | 29 ++++++++++++-------
 .../src/PageTenant/PageTenant.tsx             | 14 +++++++--
 .../SiteNavigation/SiteNavigation.test.tsx    |  3 +-
 .../SiteNavigation/SiteNavigationMobile.tsx   |  5 +++-
 4 files changed, 35 insertions(+), 16 deletions(-)

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 (
-    <LinkList>
-      {narrativesToDisplay.map((narrative) => {
-        return (
-          <NarrativeLink
-            key={narrative.id}
-            tenantId={tenant.id}
-            narrative={narrative}
-          />
-        );
-      })}
-    </LinkList>
+    <Wrapper>
+      <LinkList>
+        {narrativesToDisplay.map((narrative) => {
+          return (
+            <NarrativeLink
+              key={narrative.id}
+              tenantId={tenant.id}
+              narrative={narrative}
+            />
+          );
+        })}
+      </LinkList>
+    </Wrapper>
   );
 };
 
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 = () => {
       <NavBar style={{ borderColor: animatedStyles.borderColor }}>
         <NavGroup>
           <NavGroupItem>
-            <NavLink to={getUrlForResource({ page: "home" })}>
+            <NavLink
+              onClick={() => setExpanded(false)}
+              to={getUrlForResource({ page: "home" })}
+            >
               <BrandMark light />
             </NavLink>
           </NavGroupItem>