Wide selectors in the selector playground can cause GUI overflow issues

[calvinballing]

Current behavior:

Very long selectors in the selector playground text input box can overflow other page elements:

Desired behavior:

When some maximum width of the field is reached (based on the browser's width), the user has to scroll to see the rest of the input. Something like this: https://codepen.io/Momciloo/pen/bpyMbB

Steps to reproduce: (app code and test code)

Type or paste a very long selector in to the selector playground text input box. And yes, I know that using selectors that look like this is not recommended :)

Versions

Cypress 3.2, Windows 10, Chrome

[jennifer-shehane]

😬

The code for this input can be found here: https://github.com/cypress-io/cypress/blob/issue-3658/packages/runner/src/selector-playground/selector-playground.jsx#L60

This component is currently tested with Enzyme tests here: https://github.com/cypress-io/cypress/blob/issue-3658/packages/runner/src/selector-playground/selector-playground.spec.jsx#L8

[chrisbreiding]

The code for this is done in cypress-io/cypress#8509, but has yet to be released. We'll update this issue and reference the changelog when it's released.

[cypress-bot[bot]]

Released in 5.2.0.

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