fix(suite): Make view only promo content screen more responsive

[hstastna]

Description

Use spacingsPx for some css padding/margin values instead, where possible, add some more small adjustments.

Related Issue

Resolve #13261

Screenshots:

Before:

After:

[jvaclavik]

Looks much better. Few comments and ready to go

[peter-sanderson]

responsible -> responsive ? :)

[peter-sanderson]

👏 thanks for cleaning up my ugly CSS coding 🙇 😁

[jvaclavik]

I'm thinking could we avoid overriding Button component? 🙏 We try to avoid overriding as much as possible, because it increases complexity and lowers predictability.

I think it should be possible to do it here with following changes:

• ButtonsContainer should contain media queries logic and it should change flex-direction
• Button component should have isFullWidth prop which is the same like width: 100%

WDYT?

[hstastna]

Of course I do know we try to avoid overriding components as much as possible. I wouldn't do it if I saw some nicer ways to achieve the expected look and behavior.

Suggested ButtonsContainer changes could work, but without adjusting Button itself here I'm not sure if we can achieve the expectations easily. The thing is that...

...with isFullWidth the button takes too much horizontal space for big screens (when used with css flex props we need to make the screen more responsive). We'd still need to specify its width to avoid that and when we do this, using isFullWidth becomes unnecessary, so I've removed that.

But let's take some more time to figure this out...

[jvaclavik]

Nicely done! Works like a charm 👍