From 2595c3be4bbe895d6648c8857dad392f32ae320e Mon Sep 17 00:00:00 2001
From: Mitchell McCaffrey <mitchemmc@gmail.com>
Date: Mon, 13 Apr 2020 11:21:47 +1000
Subject: [PATCH] Fix token label and map token stretch properly

---
 src/components/MapToken.js   | 10 ++++++++--
 src/components/TokenLabel.js |  2 ++
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/MapToken.js b/src/components/MapToken.js
index fff70cb..27d49de 100644
--- a/src/components/MapToken.js
+++ b/src/components/MapToken.js
@@ -31,14 +31,20 @@ function MapToken({ token, tokenSizePercent, className }) {
           pointerEvents: "all",
         }}
       >
-        <Box sx={{ position: "absolute", display: "flex", width: "100%" }}>
+        <Box
+          sx={{
+            position: "absolute",
+            display: "flex", // Set display to flex to fix height being calculated wrong
+            width: "100%",
+            flexDirection: "column",
+          }}
+        >
           <Image
             className={className}
             sx={{
               userSelect: "none",
               touchAction: "none",
               width: "100%",
-              position: "absolute", // Fix image stretch in safari
             }}
             src={token.image}
             // pass data into the dom element used to pass state to the ProxyToken
diff --git a/src/components/TokenLabel.js b/src/components/TokenLabel.js
index b754bf1..91ac687 100644
--- a/src/components/TokenLabel.js
+++ b/src/components/TokenLabel.js
@@ -12,6 +12,8 @@ function TokenLabel({ label }) {
         transformOrigin: "bottom center",
         pointerEvents: "none",
         width: "100%",
+        display: "flex", // Set display to flex to fix height being calculated wrong
+        flexDirection: "column",
       }}
     >
       <Image sx={{ width: "100%" }} src={tokenLabel} />