[FE] make all containers for hypercerts the same size and margin/padding, e.g. on explore page

[holkexyz]

(1) The containers for the hypercert on the explore page as well as profile pages increase in size if the title has a second row. I think space for two rows is good (after that the title would be cut with three dots ...). And I would bottom-align them, such that the distance to the line is always the same and the extra white space if there is only one line of title is above the title.

(2a) Due to the different sizes of the images, the look doesn't seem consistent. Maybe we can have margin on the hypercert image (or padding on the container)? e.g. on the sides it could align with the text below the image and the top could have the same space

(2b) If a hypercert image is small like ReFi Cape Town below, can we scale it up or why is it so small? (it seems it was minted via our frontend)

[bitbeckers]

@thebeyondr is that ReFi Cape Town image smaller, because the image is a literal screenshot and their screen resolution is lower?

[bitbeckers]

@holkexyz we defined the scoped changes as the following. As you know, we have inconsistent images and the best way to render will always be an approximation because other users could follow different dimensions.

@0xRowdy will implement accoridng to the image below and check with you to get a 👍

[bitbeckers]

@0xRowdy the explosing of the width should also not happen, the paddings as defined above should be respected

ref: from #204

[holkexyz]

edit the whole comment: I see now that I should review the suggested changes that aren't implemented yet

Yes, to the changes. Except that I think we want to have consistent padding on the left, top, and right around the image. And then scale up/down the image till it either fills the full height or width

[bitbeckers]

Discussed the image below with @thebeyondr , apparently the image is normal size but padded with gray, which is why it looks tiny. This shouldn't be a problem anymore because the current implementation doesn't have that issue

[thebeyondr]

Its padded with transparent pixels*. They only appear grey because the grey of the box can be seen through them.

[0xRowdy]

Many of these issues were resolved in #249 as the cards were heavily refactored.

#256 handles the width of the column to prevent "explosion of the width"