fix: make ScriptError display at full height in Runner

[marktnoonan]

• Closes https://cypress-io.atlassian.net/browse/UNIFY-1763

User facing changelog

Corrects the height of the ScriptError component in Cypress 10. Not really a user facing change since this hasn't been released.

Additional details

This component ended up too short as a result of changes to the surrounding elements in a previous PR. The change wasn't noticed at the time since there was not an e2e test for this state, and the component test wasn't affected by the DOM changes so it looked fine in Percy.

This PR corrects the height by changing some CSS classes, and uses the AUT header store to correctly react to wrapping in the header. It also adds a test that confirms the state does appear when the runner attempts to load file with a syntax error.

Steps to test

Run yarn dev to open the test runner for this branch, and visit an end-to-end spec that works. Make a syntax error in the spec that's open so that the ScriptError will appear. Example of a spec that triggers this state is this one, where the closing parenthesis is missing:

describe('Bad spec', () => { it('has a syntax error', () => { expect(true).to.be.true }) }

Once you see the error, please resize the reporter and the window, open and close the specs list etc. The error display area should always be fully visible, never get cut off and never get too small.

How has the user experience changed?

Before this PR:

After this PR:

PR Tasks

• Have tests been added/updated?
• [na] Has the original issue (or this PR, if no issue exists) been tagged with a release in ZenHub? (user-facing changes only)
• [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

4921 • 0 • 59 • 0 • 1

---

Run details

Project	cypress
Status	Passed
Commit	c301f8e
Started	May 31, 2022 2:43 PM
Ended	May 31, 2022 3:03 PM
Duration	19:41 💡
OS	Linux Debian - 10.11
Browser	Multiple

View run in Cypress Dashboard ➡️

---

Flakiness

	cypress/e2e/next.cy.ts		1
1	Working with next-12.1.6 > should detect new spec

---

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

[tbiethman]

Tested as described, error renders with expected height 👍

[ZachJW34]

Works great!