Add max height to images (#938)

* fix: Add max height to images - also provides an 'unbound' class to unset this style * fix: images overflowing main body container --------- Co-authored-by: Sunny Zanchi <[email protected]>
newrelic · Dec 8, 2023 · 2a8c271 · 2a8c271
1 parent bf92bfb
commit 2a8c271
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 0 deletions.
diff --git a/packages/gatsby-theme-newrelic/src/components/GlobalStyles/GlobalStyles.js b/packages/gatsby-theme-newrelic/src/components/GlobalStyles/GlobalStyles.js
@@ -59,7 +59,12 @@ const GlobalStyles = ({ layout }) => (
       }
 
       img {
+        max-height: 550px;
         max-width: 100%;
+
+        &.unbound {
+          max-height: unset;
+        }
       }
 
       h1,

diff --git a/packages/gatsby-theme-newrelic/src/components/Lightbox.js b/packages/gatsby-theme-newrelic/src/components/Lightbox.js
@@ -69,6 +69,7 @@ const Lightbox = ({ children }) => {
                     background: var(--modal-wrapper-color);
 
                     img {
+                      max-height: unset;
                       max-width: unset;
                     }
                   `}
-Original file line number
+Diff line change
@@ Expand Up / @@ -69,6 +69,7 @@ const Lightbox = ({ children }) => { @@
                         background: var(--modal-wrapper-color);
                         img {
+                          max-height: unset;
                           max-width: unset;
                         }
                       `}
@@ Expand Down @@