feat: update list styling

newrelic · Jan 4, 2022 · be2ac53 · be2ac53
1 parent cec2459
commit be2ac53
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git 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
@@ -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;
               `}
             `}
           >