Wrap scenario and step names in UI

[pburkindine]

Current behavior:

Scenario and step names are truncated with an ellipsis in the UI, making it difficult to tell at a glance what is failing and not.

Desired behavior:

Names should wrap to the next line.

[pburkindine]

[jennifer-shehane]

The css for these test titles can be found here: https://github.com/cypress-io/cypress/blob/develop/packages/reporter/src/runnables/runnables.scss#L189

The test title's jsx can be found here: https://github.com/cypress-io/cypress/blob/develop/packages/reporter/src/test/test.jsx#L81

Instructions on running the tests for this UI are here (tests are Cypress tests): https://github.com/cypress-io/cypress/blob/develop/packages/reporter/README.md#L65

[coderwurst]

Hi! Am I understanding this correctly, that the following is the desired effect:�

[coderwurst]

cool - I'm on it https://github.com/coderwurst/cypress/tree/issue-3947

I haven't managed to get the tests fully up and running locally to ensure there are no unwanted effects with very long error names, I'll get some time at the weekend to get another look!

[brian-mann]

@bkucera @chrisbreiding @flotwig @bahmutov what are your thoughts on this?

[chrisbreiding]

Looks good to me. Here's a screenshot of it in action:

[kuceb]

I like it, but maybe we could hide title names at a certain minimal width, so you dont get the:

✔️
d
i
s
p
l
a
y
s

e
m
p
t
y

e

[coderwurst]

@bkucera just the title names and leave the ticks visible?

Alternative Idea - could we set the area to have a mid-width of x pixels, so that single words are still readable?

[cypress-bot]

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

[cypress-bot]

Released in 3.3.2.