From a2bbed65d52064ebc2222232ac4c39e68c99803d Mon Sep 17 00:00:00 2001
From: Paul Kaplan <pkaplan@media.mit.edu>
Date: Wed, 19 Jun 2019 09:14:27 -0400
Subject: [PATCH] Force img node change to prevent previous tutorial images
 from hanging around

---
 src/components/cards/card.css  | 3 +++
 src/components/cards/cards.jsx | 1 +
 2 files changed, 4 insertions(+)

diff --git a/src/components/cards/card.css b/src/components/cards/card.css
index 265ca22d1..ad712e339 100644
--- a/src/components/cards/card.css
+++ b/src/components/cards/card.css
@@ -170,6 +170,9 @@
     align-items: center;
     position: relative;
     text-align: center;
+
+    /* Min height prevents layout changing when images change */
+    min-height: 256px;
 }
 
 .step-video {
diff --git a/src/components/cards/cards.jsx b/src/components/cards/cards.jsx
index 9bb147f13..66c9e91e3 100644
--- a/src/components/cards/cards.jsx
+++ b/src/components/cards/cards.jsx
@@ -155,6 +155,7 @@ const ImageStep = ({title, image}) => (
             <img
                 className={styles.stepImage}
                 draggable={false}
+                key={image} /* Use src as key to prevent hanging around on slow connections */
                 src={image}
             />
         </div>