From be2ac538523b349b81325c3451c2ef34c842948d Mon Sep 17 00:00:00 2001
From: aswanson-nr <aswanson@newrelic.com>
Date: Mon, 3 Jan 2022 15:28:35 -0800
Subject: [PATCH] feat: update list styling

---
 src/components/PackTile.js         | 7 +++++--
 src/pages/instant-observability.js | 4 +++-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/PackTile.js b/src/components/PackTile.js
index f703a61d8..82f70022e 100644
--- a/src/components/PackTile.js
+++ b/src/components/PackTile.js
@@ -80,6 +80,8 @@ const PackTile = ({
         ${view === VIEWS.LIST &&
         css`
           margin-bottom: 1em;
+          display: grid;
+          grid-template-columns: 1fr 3.5fr 0.5fr;
           flex-direction: row;
         `}
 
@@ -95,8 +97,8 @@ const PackTile = ({
         css={css`
           height: 100px;
           object-fit: scale-down;
-          width: ${view === VIEWS.GRID ? 100 : 25}%;
-          padding: 5% ${view === VIEWS.GRID ? 5 : 1}%;
+          width: 100%;
+          padding: 5% 5%;
           margin: 0 auto 10px;
 
           .dark-mode & {
@@ -106,6 +108,7 @@ const PackTile = ({
           ${view === VIEWS.LIST &&
           css`
             max-height: 150px;
+            height: 100%;
 
             flex: 0 0 auto;
             @media (max-width: 1080px) {
diff --git a/src/pages/instant-observability.js b/src/pages/instant-observability.js
index b55c3adde..6cd68b600 100644
--- a/src/pages/instant-observability.js
+++ b/src/pages/instant-observability.js
@@ -516,7 +516,9 @@ const QuickstartsPage = ({ data, location }) => {
 
               ${view === VIEWS.LIST &&
               css`
-                display: initial;
+                grid-auto-rows: 1fr;
+                grid-template-columns: 1fr;
+                grid-gap: 0.25rem;
               `}
             `}
           >