fix: const file for breakpoints

newrelic · Jan 4, 2022 · 52d1376 · 52d1376
1 parent 2f613fe
commit 52d1376
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 5 deletions.
diff --git a/src/components/InstantObservability/constants.js b/src/components/InstantObservability/constants.js
@@ -0,0 +1 @@
+export const COLLAPSE_BREAKPOINT = '760px';
diff --git a/src/components/PackTile.js b/src/components/PackTile.js
@@ -11,6 +11,7 @@ import {
 } from '@newrelic/gatsby-theme-newrelic';
 import { SHIELD_LEVELS, RESERVED_QUICKSTART_IDS } from '../data/constants';
 import PackImg from './PackImg';
+import { COLLAPSE_BREAKPOINT } from './InstantObservability/constants';
 
 const VIEWS = {
   GRID: 'Grid view',
@@ -79,7 +80,7 @@ const PackTile = ({
           flex-direction: row;
         `}
 
-        @media screen and (max-width: 760px) {
+        @media screen and (max-width: ${COLLAPSE_BREAKPOINT}) {
           flex-direction: row;
         }
       `}
@@ -109,7 +110,7 @@ const PackTile = ({
             }
           `}
 
-          @media screen and (max-width: 760px) {
+          @media screen and (max-width: ${COLLAPSE_BREAKPOINT}) {
             display: none;
           }
         `}
@@ -154,7 +155,7 @@ const PackTile = ({
           span {
             color: var(--color-brand-500);
           }
-          @media screen and (max-width: 760px) {
+          @media screen and (max-width: ${COLLAPSE_BREAKPOINT}) {
             flex-direction: column;
             justify-content: flex-end;
           }

diff --git a/src/pages/instant-observability.js b/src/pages/instant-observability.js
@@ -20,11 +20,10 @@ import { useDebounce } from 'react-use';
 import { sortFeaturedQuickstarts } from '../utils/sortFeaturedQuickstarts';
 import { QUICKSTARTS_REPO, RESERVED_QUICKSTART_IDS } from '../data/constants';
 import CATEGORIES from '../data/instant-observability-categories';
+import { COLLAPSE_BREAKPOINT } from '../components/InstantObservability/constants';
 
 import SuperTiles from '../components/SuperTiles';
 
-const COLLAPSE_BREAKPOINT = '760px';
-
 const VIEWS = {
   GRID: 'Grid view',
   LIST: 'List view',