Padding for translated text in top-page cards

[melissawm]

Similar to #416: translated (portuguese) text in the cards takes up more space than expected. Row 1, column 2 shows the text too close to the bottom border:

Not sure if this will happen for other languages, though.

[rgommers]

I'm not sure if there's a better solution than "use as much whitespace as the most verbose language needs". @joelachance any other ideas?

[joelachance]

text-overflow: ellipsis; looks like a pretty cool solution that might be a good option here, I can look at this if needed. Let me know, @rgommers!

More examples/info here: https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/

[rgommers]

Great idea @joelachance! I think for box titles it may look a little odd and we should increase the space a bit to make things fit (if every 3-4 word title has the last word replaced by ... that probably loses too much), but for text that's 3-4 lines long it should work well. There's more multi-line examples at https://css-tricks.com/line-clampin/. The "fade out way" looks nice too.

[joelachance]

@rgommers, I agree about the titles, we should definitely increase padding/margin there. I also like the fade out for the main content in these cells, good find!
I can work on this one.

[rgommers]

Thanks!

[joelachance]

How does this look? I didn't add much to the title, but I think it looks a little better. I did check it on English and it seems fine, I didn't check it on other translations yet besides en and pt.

Fade added, see column 2, row 1.

[rgommers]

Looks good to me! @melissawm what do you think?

PR preview will show en/pt/ja so it'll be easy to compare.

[joelachance]

PR above!
@rgommers @melissawm

[melissawm]

Left my review in the PR - looks great to me, thanks!