fix: Card action buttons align

[gawrysiak]

Motivation

Fixes #556. It appears like the default card actions padding is slightly wrong. The issue affects buttons as well.

This is somehow a possibly minor, but breaking change for existing projects, so I'll try to explain what's going on.

Resources

Cards

According to MD guidelines the card actions padding is 8. The content's padding is 16. Cards use the "compact" buttons with smaller padding - 8 instead of standard 16.

Buttons

The standard horizontal padding is 16. Although it's different for card action buttons. Notice the min-width value, which is 64, but the buttons section doesn't really describe the compact buttons.

Solution

The example provided by @brunohkbx presented a case where it got caught into the min-width trap. The text was too small and caused a larger button padding. If you run this expo snack, it presents the same case, just with different button text. First goes too far to the right, second goes too far to the left.

The first thing to fix was the card actions padding - switch from 4 to 8. It results in:

So it works for the expo examples case, but not really for the mentioned issue. It still gives an extra button padding due to too short text (min-width).

After removing the min-width from compact buttons, it seems like it's finally there:

Finally, it also switches the dialog actions to 8 padding, since that's basically the same thing.

Test plan

https://snack.expo.io/HydBnn5t7
Snapshot tests updated

[callstack-bot]

Hey @gawrysiak, thank you for your pull request 🤗. The documentation from this branch can be viewed here.