fix: show info message correctly on "record your first run ui"

[sainthkh]

• Closes Record your first run UI doesn't display well on smaller width screens #21856

User facing changelog

Show info message correctly on "record your first run ui".

Additional details

• Why was this change necessary? => Message is hard to read on small viewport.
• What is affected by this change? => N/A
• Any implementation details to explain? => I tweaked the HTML structure and added some classes.

Steps to test

N/A

How has the user experience changed?

Before:

After:

PR Tasks

• Have tests been added/updated? => I intentionally didn't add test because the problem is in HTML structure.
• 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.

[rachelruderman]

Suggested change

	<span class="font-normal m-4px text-jade-600">projectId</span>
	</template>
	<template #configFile>
	<span class="font-normal m-4px text-jade-600">{{ configFilePath }}</span>
	<span class="font-normal text-jade-600">projectId</span>
	</template>
	<template #configFile>
	<span class="font-normal text-jade-600">{{ configFilePath }}</span>

[rachelruderman]

Suggested change

	<span class="font-normal m-4px text-jade-600">{{ configFilePath }}</span>
	<span class="font-normal text-jade-600">{{ configFilePath }}</span>

[rachelruderman]

Thank you for the contribution @sainthkh ! Just added some suggestions to remove the margin around the file path names:

[rachelruderman]

@sainthkh it'd be great to add a test here as well. Would you mind adding one to packages/app/src/runs/RunsConnectSuccessAlert.spec.tsx using cy.viewport() to recreate the small viewport and calling cy.percySnapshot() so we can protect against visual regressions? 🙏

[cypress]

---

Test summary

37721 • 0 • 456 • 0 • 11

---

Run details

Project	cypress
Status	Passed
Commit	7a2ef37
Started	Jul 15, 2022 6:28 PM
Ended	Jul 15, 2022 6:52 PM
Duration	23:40 💡
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 request + response headers
2	... > logs Method, Status, URL, and XHR
3	... > logs response
4	... > logs request + response headers
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

[rachelruderman]

Approving! I tried hard to get the GitHub checks green but known flake been gettin' in the way

[mike-plummer]

LGTM 🚀