fix: show info message correctly on "record your first run ui" (#22413)

Co-authored-by: Rachel <rachel@cypress.io>

Author: sainthkh

packages/app/src/runs/RunsConnectSuccessAlert.spec.tsx

@@ -13,4 +13,37 @@ describe('<RunConnectSuccessAlert />', { viewportHeight: 400 }, () => {
       },
     })
   })
+
+  // https://github.com/cypress-io/cypress/issues/21856
+  describe('resposive design', () => {
+    it('small screen (width < md(768px))', () => {
+      cy.mountFragment(RunsConnectSuccessAlertFragmentDoc, {
+        render: (gqlVal) => {
+          return (
+            <div class="bg-gray-100 h-screen p-3">
+              <RunsConnectSuccessAlert gql={gqlVal} />
+            </div>
+          )
+        },
+      })
+
+      cy.viewport(400, 800)
+      cy.percySnapshot()
+    })
+
+    it('wide screen (width >= md(768px))', () => {
+      cy.mountFragment(RunsConnectSuccessAlertFragmentDoc, {
+        render: (gqlVal) => {
+          return (
+            <div class="bg-gray-100 h-screen p-3">
+              <RunsConnectSuccessAlert gql={gqlVal} />
+            </div>
+          )
+        },
+      })
+
+      cy.viewport(1000, 800)
+      cy.percySnapshot()
+    })
+  })
 })

packages/app/src/runs/RunsConnectSuccessAlert.vue

@@ -6,28 +6,32 @@
     dismissible
     :title="t('runs.connectSuccessAlert.title')"
   >
-    <p class="flex px-16px pt-16px leading-24px items-center">
-      <i-cy-arrow-outline-right_x16 class="h-16px mr-8px w-16px inline align-middle icon-dark-jade-500" />
-      <i18n-t
-        scope="global"
-        keypath="runs.connectSuccessAlert.item1"
-      >
-        <template #projectId>
-          <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>
-        </template>
-      </i18n-t>
+    <p class="flex px-16px pt-16px leading-24px md:items-center">
+      <i-cy-arrow-outline-right_x16 class="h-16px mr-8px w-16px inline align-middle icon-dark-jade-500 mt-4px md:mt-0" />
+      <span>
+        <i18n-t
+          scope="global"
+          keypath="runs.connectSuccessAlert.item1"
+        >
+          <template #projectId>
+            <span class="font-normal text-jade-600">projectId</span>
+          </template>
+          <template #configFile>
+            <span class="font-normal text-jade-600">{{ configFilePath }}</span>
+          </template>
+        </i18n-t>
+      </span>
     </p>
-    <p class="flex px-16px pt-16px pb-16px leading-24px items-center">
-      <i-cy-arrow-outline-right_x16 class="h-16px mr-8px w-16px inline align-middle icon-dark-jade-500" />
-      <i18n-t
-        scope="global"
-        keypath="runs.connectSuccessAlert.item2"
-      >
-        <span class="font-normal m-4px text-jade-600">{{ configFilePath }}</span>
-      </i18n-t>
+    <p class="flex px-16px pt-16px pb-16px leading-24px md:items-center">
+      <i-cy-arrow-outline-right_x16 class="h-16px mr-8px w-16px inline align-middle icon-dark-jade-500 mt-4px md:mt-0" />
+      <span>
+        <i18n-t
+          scope="global"
+          keypath="runs.connectSuccessAlert.item2"
+        >
+          <span class="font-normal text-jade-600">{{ configFilePath }}</span>
+        </i18n-t>
+      </span>
     </p>
   </Alert>
 </template>