Improved deck recap component layout

[piedpiper358]

Change title color to be more readable. Layout now better supports two-line strings.

Before:

After:

[sebastientromp]

I'm fine with the color change, I think it's a good change.
I would still try to align the icons, even if the number of lines on each element is different.

[piedpiper358]

I would also like to remove the "margin-left: 40px" from ".best-against"
Because of it, the name of the deck cannot fill the allotted space

[sebastientromp]

I would also like to remove the "margin-left: 40px" from ".best-against" Because of it, the name of the deck cannot fill the allotted space

What does it look like if you remove it?

[piedpiper358]

Sorry, didn't see your message. I do it by myself.

[sebastientromp]

Why this 150%?

[piedpiper358]

This is to make the deck title block wider. Without it, it would look like this.

[sebastientromp]

I think I understand what the issue is:

• The "deck-summary" element takes the full width
• It's divided between deck-image, deck-title and best-against
• deck-image has a fixed width, best-against is set to take 100% of the space

This means that the layout itself has to figure out what's the best way to give room to each widget.
There are multiple solutions:

• Attribute width to each element so that the total is 100% (you can have a mix of pixel width + flex-grow: 1)
• Keep the sizes dynamic, using flex-basis to tell the layout the relative size of the items

In this specific case, the component's width will always be constrained by the width of the ads column, so 400px. So I'm fine with using absolute pixel sizes in this case, but the other option is fine too.