Build: Fix E2E and chromatic inconsistencies

[yannbf]

Closes #

What I did

This PR solves a few sources of flakiness.

Viewports E2E test

It seemed to be testing the wrong element, which playwright assumed had the same dimensions either without or with viewports enabled:

Chromatic

The "Desktop" component stories had a counter which was causing inconsistencies, and now it has chromatic ignore regions to avoid it:

The "DocsPage" story has a very inconsistent args table row which keeps changing in order, therefore I added a play function which injects a chromatic ignore region to it. I did it in the play function and not in the component so that we don't always ignore snapshots for the argstable component, and we really just ignore in the place we know is inconsistent.

Additionally I made the "play function banner" (we display only when snapshotting stories in Chromatic that have play function) more prominent and explanatory

The "TS Argtypes" suffers a similar issue, where a minified function name keeps changing, so I added a similar mechanism using the play function.

How to test

Tests should work correctly

Checklist

• Make sure your changes are tested (stories and/or unit, integration, or end-to-end tests)
• Make sure to add/update documentation regarding your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Maintainers

• If this PR should be tested against many or all sandboxes,
  make sure to add the ci:merged or ci:daily GH label to it.
• Make sure this PR contains one of the labels below.

["cleanup", "BREAKING CHANGE", "feature request", "bug", "documentation", "maintenance", "dependencies", "other"]

[kasperpeulen]

Nice work man!

[shilman]

Nice one @yannbf 👏