MetaMask/snaps

`Card` title and description overflow

Opened this issue · 1 comments

ziad-saab commented

The following Custom UI code:

<Card
  title="Card with a very very very very very very very very  long title"
  description="This description is sooooooo long that it overflows the bounds of the window"
  value="Card value"
  extra="Card extra"
/>

Results in the following output:

image

In addition to title and description overflowing, the value and extra strings are presumably pushed all the way to the right and not displayed at all.

If we instead have very long value and/or extra props:

<Card
  title="Card title"
  description="Card description"
  value="This is a very very very very super extra extra long card value"
  extra="This is a very very very very super extra extra long card extra"
/>

The result looks like this:

image

It seems like value and extra are properly overflowed, but there's no spacing between them and their title/description companions.

0xAskar commented

I have the same issue. Have you found a solution? @ziad-saab

Also, thanks for your tutorial on the docs!

Here's my example problem in the picture below. Also,

  • do you know how to find a work around with loading remote urls for pictures
  • Is there anyway to directly change the Metamask UI? or does it have to be via just the homepage, and popups?
image