Debug Page - Fix styling of Empty States

[warrensplayer]

Current behavior

The Debug page empty state components do not render like the most recent designs. Currently, the DebugEmptyView component is using a percentage left and right margin for controlling the wrapping of the copy. This can result in the copy being too narrow when the browser width is smaller. Also, the copy in the link to the Cypress documentation for each empty state duplicates the content of the copy and is too verbose.

Desired behavior

Update the DebugEmptyView to use a max width of 640px instead of a percentage margin.

Update the copy for the links for each empty state to just say "Learn more". Give the "Learn more" links 8px of left margin to separate them a bit from the rest of the copy. Slack discussion

Note: This screenshot is from Figma and intended to show the different in max width for the copy and the "Learn more" link. Other elements do not necessarily match existing state

Figma - https://www.figma.com/file/PAOozuCxtfetqP8fUVvg0y/branch/QkCp2F69X0qyLo7qnYQ67e/Cypress-App?node-id=21167%3A199979&t=pTybv9JZ0VNMYnb4-1

[warrensplayer]

Hey team! Please add your planning poker estimate with Zenhub @astone123 @lmiller1990 @mike-plummer @jordanpowell88 @marktnoonan

[cypress-bot]

Released in 12.9.0.

This comment thread has been locked. If you are still experiencing this issue after upgrading to
Cypress v12.9.0, please open a new issue.