fix: correct breaking layout changes from theme bump

newrelic · Nov 7, 2022 · 2673e0d · 2673e0d
1 parent b940515
commit 2673e0d
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 8 deletions.
diff --git a/src/components/LandingBanner/index.js b/src/components/LandingBanner/index.js
@@ -6,13 +6,12 @@ import InstallButton from '../InstallButton';
 import { graphql } from 'gatsby';
 import { css } from '@emotion/react';
 import { quickstart } from '../../types';
+import { QUICKSTART_IMAGE_DISPLAY_BREAKPOINT } from '@data/constants';
 import QuickstartImg from '../QuickstartImg';
 import defaultImage from '../../images/defaultQuickstartImage.png';
 import BannerBackground from './BannerBackground';
 import SafeImage from '../SafeImage';
 
-const IMAGE_DISPLAY_BREAKPOINT = '1248px';
-
 const LandingBanner = ({ quickstart, className, location }) => {
   const bannerImg = useDetermineBannerImg(quickstart, {
     publicURL: defaultImage,
@@ -58,7 +57,7 @@ const LandingBanner = ({ quickstart, className, location }) => {
             color: white;
           }
 
-          @media (max-width: ${IMAGE_DISPLAY_BREAKPOINT}) {
+          @media (max-width: ${QUICKSTART_IMAGE_DISPLAY_BREAKPOINT}) {
             grid-template-areas:
               'breadcrumbs'
               'title'
@@ -90,7 +89,7 @@ const LandingBanner = ({ quickstart, className, location }) => {
                 background-color: var(--color-white);
                 border-radius: 0 0 7px 7px;
                 padding: 5px;
-                @media (max-width: ${IMAGE_DISPLAY_BREAKPOINT}) {
+                @media (max-width: ${QUICKSTART_IMAGE_DISPLAY_BREAKPOINT}) {
                   display: none;
                 }
               `}
@@ -115,7 +114,7 @@ const LandingBanner = ({ quickstart, className, location }) => {
             grid-area: title;
             margin-bottom: 0;
 
-            @media (max-width: ${IMAGE_DISPLAY_BREAKPOINT}) {
+            @media (max-width: ${QUICKSTART_IMAGE_DISPLAY_BREAKPOINT}) {
               font-size: 4vw;
             }
 
@@ -134,7 +133,7 @@ const LandingBanner = ({ quickstart, className, location }) => {
               grid-area: summ;
               font-size: 1.25vw;
 
-              @media (max-width: ${IMAGE_DISPLAY_BREAKPOINT}) {
+              @media (max-width: ${QUICKSTART_IMAGE_DISPLAY_BREAKPOINT}) {
                 font-size: 2vw;
               }
 
@@ -156,7 +155,7 @@ const LandingBanner = ({ quickstart, className, location }) => {
             margin: 0 auto 1rem;
             padding-top: 1rem;
 
-            @media (max-width: ${IMAGE_DISPLAY_BREAKPOINT}) {
+            @media (max-width: ${QUICKSTART_IMAGE_DISPLAY_BREAKPOINT}) {
               display: none;
             }
           `}

diff --git a/src/components/LandingPageFooter.js b/src/components/LandingPageFooter.js
@@ -209,6 +209,7 @@ const LandingPageFooter = ({
           <RelatedResources
             css={css`
               padding: 0;
+              border: none;
             `}
             resources={quickstart.relatedResources}
           />

diff --git a/src/data/constants.js b/src/data/constants.js
@@ -47,6 +47,8 @@ export const RESERVED_QUICKSTART_IDS = {
 };
 
 export const QUICKSTARTS_COLLAPSE_BREAKPOINT = '760px';
+export const QUICKSTART_IMAGE_DISPLAY_BREAKPOINT = '1248px';
+
 export const MIN_WIDTH_BREAKPOINT = '355px';
 
 // breakpoints for index.js and slick carousel

diff --git a/src/layouts/QuickStartLayout.js b/src/layouts/QuickStartLayout.js
@@ -8,7 +8,10 @@ import GlobalFooter from '@newrelic/gatsby-theme-newrelic/src/components/GlobalF
 import GetStartedFooter from '@components/GetStartedFooter';
 import Layout from '@components/Layout';
 import PropTypes from 'prop-types';
-import { QUICKSTARTS_COLLAPSE_BREAKPOINT } from '@data/constants';
+import {
+  QUICKSTARTS_COLLAPSE_BREAKPOINT,
+  QUICKSTART_IMAGE_DISPLAY_BREAKPOINT,
+} from '@data/constants';
 import React from 'react';
 import { css } from '@emotion/react';
 
@@ -19,13 +22,19 @@ const QuickStartLayout = ({ children }) => {
       <Layout
         css={css`
           --sidebar-width: 0;
+          grid-area: unset;
         `}
       >
         <Layout.Main
           css={css`
             min-height: 100vh;
+            max-width: unset;
             padding: 0;
 
+            @media (max-width: ${QUICKSTART_IMAGE_DISPLAY_BREAKPOINT}) {
+              width: 100vw;
+            }
+
             > * {
             }
           `}