From 9ae1704908d9f96f062dde314dd6dee58c5db306 Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Fri, 8 Jan 2021 01:26:05 -0800
Subject: [PATCH] fix visual regressions on Your Outfits page

Oops, when refactoring and adding alt text, I didn't realize the padding for the text would affect the images too! And I forgot to add `overflow: hidden` to round the image's corners. Fixed!
---
 src/app/UserOutfitsPage.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/app/UserOutfitsPage.js b/src/app/UserOutfitsPage.js
index eb4e865..18e0078 100644
--- a/src/app/UserOutfitsPage.js
+++ b/src/app/UserOutfitsPage.js
@@ -114,12 +114,17 @@ function OutfitCard({ outfit }) {
           // to load on a new device, and the flash of text is unhelpful.
           color="white"
           fontSize="xs"
-          padding="2"
+          width={150}
+          height={150}
           overflow="auto"
           className={css`
             &:-moz-loading {
               visibility: hidden;
             }
+
+            &:-moz-broken {
+              padding: 0.5rem;
+            }
           `}
         />
       )}
@@ -165,6 +170,7 @@ function OutfitCardLayout({ image, caption }) {
         marginBottom="2"
         borderRadius="md"
         background="gray.600"
+        overflow="hidden"
       >
         {image}
       </Box>