Fix dark theme colors and overflowing rounded corners

[gtsiolis]

Fix #4717.

[gtsiolis]

@jankeromnes could you review these minor changes since you already took a look in #4717 (comment)? 🏀

[jankeromnes]

Sure! Thanks.

Instinctively, I'd really want an overflow-hidden to go with the container's rounded-xl class. I think that's a much better (and repeatable) solution than playing with rounded-t-xl or rounded-b-xl in the child containers.

However, let's see how the preview environment looks with the current changes. 🙂

[gtsiolis]

Instinctively, I'd really want ...

@jankeromnes Same here!

Feel free to revert the changes in favor of using `overflow-hidden.

The only push back for not using overflow-hidden could be browser support although I think both approaches are well supported for what is needed here. See border-top-radius v. overflow-hidden.

[jankeromnes]

The only push back for not using overflow-hidden could be browser support although I think both approaches are well supported for what is needed here. See border-top-radius v. overflow-hidden.

overflow: hidden seems like a cornerstone of the web that should work everywhere.

The way I read caniuse.com is:

• border-top-radius is supported everywhere, except on Opera Mini
• overflow: hidden is supported everywhere, even on Opera Mini (also, there are stripes but they're about additional features that we don't use)

[jankeromnes]

Many thanks!

Works like a charm ✨

I'd still prefer an overflow-hidden fix, but it's cool to do that later. The most important is that the dashboard looks good (and feels snappy) in any theme and on any device. ☺️

/approve

[roboquat]

LGTM label has been added.

Git tree hash: 1670f21a75012d81499af497b571e190d50bb11c

[roboquat]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: jankeromnes

Associated issue: #4717

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

• components/dashboard/OWNERS [jankeromnes]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[gtsiolis]

Thanks @jankeromnes! 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢 🚢