diff --git a/src/components/InstantObservability/constants.js b/src/components/InstantObservability/constants.js new file mode 100644 index 000000000..463cd905b --- /dev/null +++ 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 index dcd30d7ec..b6a6990fc 100644 --- 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 index ba5db743f..09b05bbcb 100644 --- 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',