After visiting runs page, Runner styles are weird

[sync-by-unito]

Current Behavior

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.

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.

Loom video demonstrating this and finding the fix: https://www.loom.com/share/2bfceb0b66d640728d684e4650daef8a

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.

h2.

Desired Behavior

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

Reproducible Steps

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 repeat - the bad styles return as soon as the Runs page mounts, you can see them pop in briefly during the navigation.

┆Issue is synchronized with this Jira Bug by Unito
┆Attachments: Screen Shot 2022-05-23 at 2.53.38 PM.png | Screen Shot 2022-05-25 at 6.42.56 AM.png | Screen Shot 2022-05-25 at 6.43.01 AM.png
┆author: Mark Noonan
┆epic: UI/UX Improvements
┆friendlyId: UNIFY-1811
┆priority: High
┆sprint: Fast Follows 1
┆taskType: Bug

[sync-by-unito]

➤ Jennifer Shehane commented:

Reported by Bill Glesias here:

https://cypressio.slack.com/archives/C02MW5QBD4K/p1653501567838679 ( https://cypressio.slack.com/archives/C02MW5QBD4K/p1653501567838679|smart-card )

[marktnoonan]

Assigning to myself until Mike P gets github hooked up.

[cypress-bot]

Released in 10.0.1.

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