fix: prevent RunCard styles from leaking outside of component

[marktnoonan]

• Closes After visiting runs page, Runner styles are weird #21931

User facing changelog

Visiting the Runs page will no longer cause list styles to look incorrect in the Spec Runner page and Header.

Desired Behavior

In this situation, Cypress should not show extra dots in the Runner UI that don’t belong there.

Additional details

This is caused by styles leaking from this component: packages/app/src/runs/RunCard.vue and the fix is a one-line change, to add a scoped attribute to the style tag here.

Steps to test

Before checking out this branch:

1. Open the cypress app
2. Visit the Runs page
3. Visit the Specs List
4. Open a Spec
5. See bad styles
6. Refresh
7. See good styles
8. Visit the Runs page and then visit a spec again - the bad styles return as soon as the Runs page mounts, you can see them pop in briefly during the navigation.

Repeat these steps after checking out this branch and the problem should be fixed.

How has the user experience changed?

There are extra dots and big spaces between items in the command log, and extra dots on the far left of the inline specs list, that appear when you visit a spec after visiting the Specs.

Some other side effects caused by same leaking styles - any list longer than one item is affected. It makes the docs menu look nested and the browser list look misaligned.

This PR fixes all of that so that things look as expected whether we have visited the runs page or not. Here is a screenshot of part of the app after visiting the runs page:

PR Tasks

• [na] Have tests been added/updated?
• Has the original issue (or this PR, if no issue exists) been tagged with a release in ZenHub? (user-facing changes only) - no tag yet, not sure which release this will go into
• [na] Has a PR for user-facing changes been opened in cypress-documentation?
• [na] Have API changes been updated in the type definitions?

[cypress-bot]

Thanks for taking the time to open a PR!

• Create a Draft Pull Request if your PR is not ready for review. Mark the PR as Ready for Review when you're ready for a Cypress team member to review the PR.
• Become familiar with the Code Review Checklist for guidelines on coding standards and what needs to be done before a PR can be merged.

[cypress]

---

Test summary

37553 • 0 • 454 • 0 • 3

---

Run details

Project	cypress
Status	Passed
Commit	3509e87
Started	Jun 1, 2022 10:06 PM
Ended	Jun 1, 2022 10:22 PM
Duration	16:06 💡
OS	Linux Debian - 10.11
Browser	Multiple

View run in Cypress Dashboard ➡️

---

Flakiness

	commands/actions/click.cy.js		1
1	... > scroll-behavior > can scroll to and click elements in html with scroll-behavior: smooth
	e2e/origin/validation.cy.ts		1
1	cy.origin > successes > uses cy.origin twice
	cypress/proxy-logging.cy.ts		1
1	Proxy Logging > request logging > xhr log has response body/status code when xhr response is logged second

---

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard