From e71b5f360ef1fcd56a6442724596dafad1347e9f Mon Sep 17 00:00:00 2001
From: Zack Stickles <zstickles@gmail.com>
Date: Thu, 10 Jun 2021 13:56:24 -0700
Subject: [PATCH] chore: ensure that images are always the same width

---
 src/pages/observability-packs.js | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/pages/observability-packs.js b/src/pages/observability-packs.js
index 7d2991a24..a80dfe9c9 100644
--- a/src/pages/observability-packs.js
+++ b/src/pages/observability-packs.js
@@ -248,19 +248,16 @@ const ObservabilityPacksPage = ({ data, location }) => {
               }}
               css={css`
                 display: block;
-                width: 100%;
-                padding: 0 5%;
                 height: 200px;
                 background-color: var(--color-white);
-                margin: auto;
                 object-fit: scale-down;
+                width: ${view === VIEWS.GRID ? 100 : 25}%;
+                padding: 0 ${view === VIEWS.GRID ? 5 : 1}%;
+                margin: ${view === VIEWS.GRID ? 'auto' : 0};
 
                 ${view === VIEWS.LIST &&
                 css`
-                  width: 25%;
-                  padding: 0 1%;
                   max-height: 150px;
-                  margin: 0;
 
                   @media (max-width: 1080px) {
                     display: none;
@@ -271,6 +268,15 @@ const ObservabilityPacksPage = ({ data, location }) => {
             <div
               css={css`
                 padding: 1em;
+
+                ${view === VIEWS.LIST &&
+                css`
+                  width: 75%;
+
+                  @media (max-width: 1080px) {
+                    width: 100%;
+                  }
+                `}
               `}
             >
               <h4>