fix: prevent RunCard styles from leaking outside of component #22014
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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 thestyle
tag here.Steps to test
Before checking out this branch:
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
cypress-documentation
?type definitions
?