fix: adjusting tablet breakpoint to change views at 1079px

src/components/PackTile.js

@@ -13,8 +13,6 @@ import {
 import { SHIELD_LEVELS, RESERVED_QUICKSTART_IDS } from '../data/constants';
 import PackImg from './PackImg';
 
-const IMAGE_BREAKPOINT = '1080px';
-
 const VIEWS = {
   GRID: 'Grid view',
   LIST: 'List view',
@@ -92,18 +90,6 @@ const PackTile = ({
           'summary summary'
           '. tag';
 
-        /* Grid view without logo */
-        ${!isListView() &&
-        css`
-          @media screen and (max-width: ${IMAGE_BREAKPOINT}) {
-            grid-template-rows: var(--title-row-height) 1fr 1fr;
-            grid-template-areas:
-              'title title'
-              'summary summary'
-              '. tag';
-          }
-        `}
-
         /* List view */
         ${isListView() &&
         css`
@@ -132,18 +118,10 @@ const PackTile = ({
         css={css`
           align-items: center;
           display: flex;
+          grid-area: logo;
           height: 100%;
           justify-content: center;
           margin-bottom: 1rem;
-
-          ${isListView() &&
-          css`
-            margin-right: 0.5rem;
-          `}
-          .dark-mode & {
-            background-color: white;
-          }
-          grid-area: logo;
         `}
       >
         <div

src/data/constants.js

@@ -52,3 +52,4 @@ export const RESERVED_QUICKSTART_IDS = {
 };
 
 export const QUICKSTARTS_COLLAPSE_BREAKPOINT = '760px';
+export const LISTVIEW_BREAKPOINT = '1080px';

src/pages/instant-observability.js

@@ -22,6 +22,7 @@ import {
   QUICKSTARTS_REPO,
   RESERVED_QUICKSTART_IDS,
   QUICKSTARTS_COLLAPSE_BREAKPOINT,
+  LISTVIEW_BREAKPOINT,
 } from '../data/constants';
 import CATEGORIES from '../data/instant-observability-categories';
 
@@ -94,7 +95,9 @@ const QuickstartsPage = ({ data, location }) => {
     const searchParam = params.get('search');
     const categoryParam = params.get('category');
 
-    if (isMobile) {
+    // Forcing view to List View if device is < 1080px.
+    const width = window.innerWidth;
+    if (width < LISTVIEW_BREAKPOINT) {
       setView(VIEWS.LIST);
     }
 
@@ -371,7 +374,7 @@ const QuickstartsPage = ({ data, location }) => {
                 });
               }}
               css={css`
-                @media screen and (max-width: ${QUICKSTARTS_COLLAPSE_BREAKPOINT}) {
+                @media screen and (max-width: ${LISTVIEW_BREAKPOINT}) {
                   display: none;
                 }
               `}