From 35f825c236285d1b96e378d156eb919589db2f96 Mon Sep 17 00:00:00 2001
From: Stephan Ringel <ringel@adobe.com>
Date: Sun, 18 Oct 2020 22:24:32 +0200
Subject: [PATCH] fix: Design Q&A follow up issues

---
 .../src/components/Heading/index.js           |  4 ----
 .../src/components/Hero/index.js              | 21 +++++++++++++------
 .../src/components/InlineCode/index.js        |  1 -
 .../src/components/Layout/index.js            |  2 +-
 .../src/components/MDXFilter/index.js         |  2 +-
 .../src/components/SideNav/index.js           |  6 +++++-
 6 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/packages/gatsby-theme-parliament/src/components/Heading/index.js b/packages/gatsby-theme-parliament/src/components/Heading/index.js
index 08f3df1a85..82dae494fc 100644
--- a/packages/gatsby-theme-parliament/src/components/Heading/index.js
+++ b/packages/gatsby-theme-parliament/src/components/Heading/index.js
@@ -58,10 +58,6 @@ const createHeading = (level, { id, children, className, css: styles, ...props }
   const heading2Overrides = `
     margin-top: var(--spectrum-global-dimension-size-800);
     margin-bottom: var(--spectrum-global-dimension-size-100) !important;
-
-    &:first-of-type {
-      margin-top: 0;
-    }
   `;
   const heading3Overrides = `
     color: var(--spectrum-global-color-gray-800);
diff --git a/packages/gatsby-theme-parliament/src/components/Hero/index.js b/packages/gatsby-theme-parliament/src/components/Hero/index.js
index e099767365..5365582f73 100644
--- a/packages/gatsby-theme-parliament/src/components/Hero/index.js
+++ b/packages/gatsby-theme-parliament/src/components/Hero/index.js
@@ -49,7 +49,7 @@ const HeroButtons = ({ buttons, variants = ['cta', 'primary'], quiets = [true, t
     </ButtonGroup>
   ) : null;
 
-const HeroImage = ({ image }) =>
+const HeroImage = ({ image, styles }) =>
   image
     ? React.cloneElement(image, {
         css: css`
@@ -58,6 +58,7 @@ const HeroImage = ({ image }) =>
           justify-content: center;
           height: 100%;
           margin-top: 0;
+          ${styles}
 
           & > img {
             width: 100%;
@@ -118,13 +119,23 @@ const Hero = ({
       <section
         className={`spectrum--${theme}`}
         css={css`
+          position: relative;
           height: var(--spectrum-global-dimension-size-3400);
           margin-bottom: var(--spectrum-global-dimension-size-400);
           background: ${background ?? 'rgb( 29, 125, 238)'};
           width: 100%;
-          display: inline-flex;
-          flex-direction: row-reverse;
+          display: flex;
+
+          & + div h2:first-of-type {
+            margin-top: 0 !important;
+          }
+
+          @media screen and (max-width: ${LARGE_SCREEN_WIDTH}) {
+            overflow: auto;
+            height: 100vh;
+          }
         `}>
+        <HeroImage image={image} styles={`position: absolute;`} />
         <div
           css={css`
             margin: auto;
@@ -140,8 +151,6 @@ const Hero = ({
               margin-top: 0 !important;
             }
           `}>
-          <HeroImage image={image} />
-
           <div
             css={css`
               width: calc(5 * 100% / 12);
@@ -156,7 +165,7 @@ const Hero = ({
 
               @media screen and (max-width: ${LARGE_SCREEN_WIDTH}) {
                 width: auto;
-                margin-left: var(--spectrum-global-dimension-size-400);
+                padding: 0 var(--spectrum-global-dimension-size-400);
               }
             `}>
             <HeroHeading heading={heading} variant={variant} />
diff --git a/packages/gatsby-theme-parliament/src/components/InlineCode/index.js b/packages/gatsby-theme-parliament/src/components/InlineCode/index.js
index 24933a7308..583773cd7b 100644
--- a/packages/gatsby-theme-parliament/src/components/InlineCode/index.js
+++ b/packages/gatsby-theme-parliament/src/components/InlineCode/index.js
@@ -26,7 +26,6 @@ export const InlineCode = ({ children, className, ...props }) => (
       margin: 0;
       display: inline-block;
       min-width: auto;
-      word-break: break-all;
     `}>
     {children}
   </code>
diff --git a/packages/gatsby-theme-parliament/src/components/Layout/index.js b/packages/gatsby-theme-parliament/src/components/Layout/index.js
index ea4e954c34..cf3c9bab72 100644
--- a/packages/gatsby-theme-parliament/src/components/Layout/index.js
+++ b/packages/gatsby-theme-parliament/src/components/Layout/index.js
@@ -231,7 +231,7 @@ export default ({ children, pageContext, location }) => {
 
                 @media screen and (max-width: ${LARGE_SCREEN_WIDTH}) {
                   #Layout-grid {
-                    grid-template-columns: auto !important;
+                    grid-template-columns: 0px auto !important;
                   }
 
                   #Layout-sidenav {
diff --git a/packages/gatsby-theme-parliament/src/components/MDXFilter/index.js b/packages/gatsby-theme-parliament/src/components/MDXFilter/index.js
index 43b7a50fbe..c6eb5aa5e0 100644
--- a/packages/gatsby-theme-parliament/src/components/MDXFilter/index.js
+++ b/packages/gatsby-theme-parliament/src/components/MDXFilter/index.js
@@ -241,7 +241,7 @@ export default ({ children, pageContext, query }) => {
                 ? 'width: var(--spectrum-global-dimension-static-grid-fluid-width);'
                 : `
                 max-width: var(--spectrum-global-dimension-static-grid-fixed-max-width);
-                margin: 0 var(--spectrum-global-dimension-size-800);'
+                margin: 0 var(--spectrum-global-dimension-size-800);
                 `}
 
               @media screen and (max-width: ${LARGE_SCREEN_WIDTH}) {
diff --git a/packages/gatsby-theme-parliament/src/components/SideNav/index.js b/packages/gatsby-theme-parliament/src/components/SideNav/index.js
index f8177f625a..8aa474ea77 100644
--- a/packages/gatsby-theme-parliament/src/components/SideNav/index.js
+++ b/packages/gatsby-theme-parliament/src/components/SideNav/index.js
@@ -59,7 +59,11 @@ const SideNav = ({ selectedPages, selectedSubPages, searchIndex }) => {
                 {page.title}
               </a>
             ) : (
-              <GatsbyLink to={page.path} className="spectrum-SideNav-itemLink" role="treeitem" aria-level={level}>
+              <GatsbyLink
+                to={page.path.endsWith('/') ? page.path : `${page.path}/`}
+                className="spectrum-SideNav-itemLink"
+                role="treeitem"
+                aria-level={level}>
                 {page.title}
               </GatsbyLink>
             )}