fix: add padding to bottom of global mode list

[viniciuspietscher]

• Closes Add padding to bottom of global mode screen so UI is not flush against bottom #21724

This PR was Co-authored-by: Mark Noonan [email protected]

User facing changelog

Add 24px of padding to bottom of global mode list.

Additional details

• Why was this change necessary?
  Projects list on GlobalPage were flush with the end of the page.

• What is affected by this change?
  GlobalPage UI

Steps to test

Add a small viewport with cy.viewport() on packages/launchpad/src/global/GlobalPage.cy.tsx

How has the user experience changed?

Before:

After:

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)
• [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.

[CLAassistant]

All committers have signed the CLA.

[tbiethman]

Fix looks good and addresses the immediate issue 👍

One thought I had is that we could add this padding globally within the launchpad, like we do for the horizontal padding:

cypress/packages/launchpad/src/Main.vue

Line 15 in b0e32f8

class="px-24px pt-86px"

This would ensure that all components rendered within Main (including the project list) would have some level of bottom padding. But it would also add more padding to components that already have their own, so we'd have to double check for those.

@marktnoonan thoughts on this approach? If we want to circle back around with another issue to make the padding consistent, I'd be fine with that too. The project list is the most egregious at this point, but the browser selection and error views are also flush with the window when scrolled:

[marktnoonan]

That's a good suggestion @tbiethman. @viniciuspietscher why don't you go ahead and make that change in Main.vue. Let's drop the component test changes from this PR and let Percy detect if the padding at the bottom of global mode changes.

[viniciuspietscher]

That's a good suggestion @tbiethman. @viniciuspietscher why don't you go ahead and make that change in Main.vue. Let's drop the component test changes from this PR and let Percy detect if the padding at the bottom of global mode changes.

@marktnoonan updated the PR with the suggested changes. 👍

[ryanjwilke]

This does look like an improvement from what we have today.

@marktnoonan I would say that we should have a look together at the padding and scrollbars together as I've seen a lot of things that don't quite match up to our expectations and it's not easy to show some of these things in Figma either.

[lmiller1990]

PRs from external contributors consistently exhibit failures on these 7 tests link to CI. I don't know why, but it has happened multiple times recently, and I'd like to find out why, it's blocking lots of great contributions. Posting this here to have something to refer to while debugging this issue.

Edit: might be fixed: #22326

• Another example. PR. CI.
• Another example 2: PR. CI.
• Another example 3: PR. CI

Even if I push an empty commit, it's the same. The problem seems to be isolated to CI runs with containers initially created by an external contributor.

[cypress]

---

Test summary

37681 • 0 • 456 • 0 • 11

---

Run details

Project	cypress
Status	Passed
Commit	a801cd2
Started	Jun 29, 2022 3:45 PM
Ended	Jun 29, 2022 4:01 PM
Duration	16:34 💡
OS	Linux Debian - 10.11
Browser	Multiple

View run in Cypress Dashboard ➡️

---

Flakiness

	actions/click.cy.js		1
1	... > scroll-behavior > can scroll to and click elements in html with scroll-behavior: smooth
	xhr.cy.js		4
1	... > logs Method, Status, URL, and XHR
2	... > logs response
3	... > logs request + response headers
4	... > logs response
This comment includes only the first 5 flaky tests. See all 11 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