Fix token label and map token stretch properly

This commit is contained in:
Mitchell McCaffrey 2020-04-13 11:21:47 +10:00
parent a6da90782b
commit 2595c3be4b
2 changed files with 10 additions and 2 deletions

View File

@ -31,14 +31,20 @@ function MapToken({ token, tokenSizePercent, className }) {
pointerEvents: "all", 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 <Image
className={className} className={className}
sx={{ sx={{
userSelect: "none", userSelect: "none",
touchAction: "none", touchAction: "none",
width: "100%", width: "100%",
position: "absolute", // Fix image stretch in safari
}} }}
src={token.image} src={token.image}
// pass data into the dom element used to pass state to the ProxyToken // pass data into the dom element used to pass state to the ProxyToken

View File

@ -12,6 +12,8 @@ function TokenLabel({ label }) {
transformOrigin: "bottom center", transformOrigin: "bottom center",
pointerEvents: "none", pointerEvents: "none",
width: "100%", width: "100%",
display: "flex", // Set display to flex to fix height being calculated wrong
flexDirection: "column",
}} }}
> >
<Image sx={{ width: "100%" }} src={tokenLabel} /> <Image sx={{ width: "100%" }} src={tokenLabel} />