From 5ada3c3b0d391d70135d6bc51b6e9058ba15b82a Mon Sep 17 00:00:00 2001
From: Chuck Dries <chuck@chuckdries.com>
Date: Tue, 28 Jun 2022 21:04:11 -0700
Subject: [PATCH] fix "last image" problem in masonry gallery

---
 src/components/MasonryGallery.js | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/components/MasonryGallery.js b/src/components/MasonryGallery.js
index 5ce3ed9..cbac5c6 100644
--- a/src/components/MasonryGallery.js
+++ b/src/components/MasonryGallery.js
@@ -103,9 +103,15 @@ const MasonryGallery = ({
         }
         const rowAspectRatioSum = currentRow.aspect;
         const ar = getAspectRatio(image);
-        const widthNumber = ((ar / rowAspectRatioSum) * 100).toFixed(7);
-
-        const width = `${widthNumber}%`;
+        let width;
+        let height = `calc(100vw / ${rowAspectRatioSum} - 10px)`
+        if (ar === rowAspectRatioSum) {
+          width = `calc(300px * ${ar})`;
+          height = 'unset'
+        } else {
+          const widthNumber = ((ar / rowAspectRatioSum) * 100).toFixed(7);
+          width = `${widthNumber}%`;
+        }
         return (
           <Link
             className={classNames(
@@ -116,8 +122,7 @@ const MasonryGallery = ({
             key={`${image.base}`}
             state={{ modal: true }}
             style={{
-              height: `calc(100vw / ${rowAspectRatioSum} - 10px)`,
-              maxHeight: '50vh',
+              height,
               width,
               // borderColor: `hsl(${image.fields.imageMeta.dominantHue}, 100%, 50%)`
               // borderColor: `rgb(${image.fields.imageMeta.vibrant.Vibrant.join(',')})`