fix: truncate text to fix layout

[Manuel-Suarez-Abascal]

• Closes issue-21755

User-facing changelog

It truncates the browser name in the UI in order to avoid layout issues when the browser name is too long.

Additional details

N/A

Steps to test

• Install Firefox Developer Edition browser.
• Launch Cypress.

How has the user experience changed?

An ellipsis will be added if the browser name is too long. Ellipsis will be added if the browser name is more than 16 characters.

PR Tasks

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

26393 • 0 • 1179 • 0 • 32

---

Run details

Project	cypress
Status	Passed
Commit	279b344
Started	Dec 29, 2022 9:02 PM
Ended	Dec 29, 2022 9:20 PM
Duration	18:56 💡
OS	Linux Debian -
Browser	Multiple

View run in Cypress Dashboard ➡️

---

Flakiness

	create-from-component.cy.ts		2
1	... > runs generated spec
2	... > runs generated spec
	commands/net_stubbing.cy.ts		3
1	network stubbing > intercepting request > can delay and throttle a StaticResponse
2	network stubbing > intercepting request > can delay and throttle a StaticResponse
3	network stubbing > intercepting request > can delay and throttle a StaticResponse
This comment includes only the first 5 flaky tests. See all 32 flaky tests in the Cypress Dashboard.

---

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

[emilyrohrbough]

@elevatebart @marktnoonan Could you re-review this PR from @Manuel-Suarez-Abascal ? You both initially provided feedback on #24831 which was closed and replaced with this PR to fix the CLA issue.

[marktnoonan]

Hi @Manuel-Suarez-Abascal & thank you for addressing the CLA issue, I think we actually need one other small CSS change to the same line to correct a spacing issue, then we can approve and merge. I'm made a comment with a padding change that works.