fix: Styling of specs list at small breakpoints

[mike-plummer]

• Closes In the specs list the vertical alignment of Specs is incorrect #22626

User facing changelog

• Fix styling issues of Specs Explorer at narrow viewport widths

Additional details

• Fix issue where spec rows aren't vertically centered at narrow viewport widths
  • This was caused by using CSS visibility rather than display which caused layout space to be preserved while hiding the item visually when we actually wanted the item to be fully removed from the layout flow at the lower breakpoint. It was being correctly handled in the header but not in the row items
• Per product request, increase min width of "New Spec" button to prevent wrapping. We may want to look into responsively scaling the Button component's padding & icon size but that feels like a larger issue to be addressed with UX

Steps to test

1. Open a project with specs in the Cypress app, navigate to Specs Explorer
2. Narrow viewport to < 768px, observe spec rows remain vertically centered and button text does not wrap

How has the user experience changed?

Before

After

PR Tasks

• [na] 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)
• [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

9288 • 0 • 114 • 0 • 1

---

Run details

Project	cypress
Status	Passed
Commit	30dfaf4
Started	Jul 15, 2022 12:25 AM
Ended	Jul 15, 2022 12:40 AM
Duration	14:25 💡
OS	Linux Debian - 10.11
Browser	Firefox 98

View run in Cypress Dashboard ➡️

---

Flakiness

	cypress/e2e/commands/actions/click.cy.js		1
1	... > scroll-behavior > can scroll to and click elements in html with scroll-behavior: smooth

---

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

[astone123]

Looks much better 👍🏻

[emilyrohrbough]

@mike-plummer sorry for the suppppper slow review!

[cypress-bot]

Released in 10.3.1.

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