From 13dbd418a25a8e7b3d65ececbbd3c41dac220b33 Mon Sep 17 00:00:00 2001
From: Zachary Williams <zachjw34@gmail.com>
Date: Fri, 3 Feb 2023 10:53:51 -0600
Subject: [PATCH 1/2] misc: improve debug loading text wrap responsiveness

---
 .../src/debug/empty/DebugEmptyStates.cy.tsx   |  4 ++++
 .../app/src/debug/empty/DebugEmptyView.vue    | 22 +++++++++----------
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/packages/app/src/debug/empty/DebugEmptyStates.cy.tsx b/packages/app/src/debug/empty/DebugEmptyStates.cy.tsx
index dad90a051224..15339fe3adfe 100644
--- a/packages/app/src/debug/empty/DebugEmptyStates.cy.tsx
+++ b/packages/app/src/debug/empty/DebugEmptyStates.cy.tsx
@@ -33,6 +33,10 @@ describe('Debug page empty states', () => {
       cy.findByRole('link', { name: 'Learn about project setup in Cypress' }).should('have.attr', 'href', 'https://on.cypress.io/adding-new-project?utm_source=Binary%3A+Launchpad&utm_medium=Debug+Tab&utm_campaign=Learn+More')
 
       cy.percySnapshot()
+
+      cy.viewport(600, 600)
+
+      cy.percySnapshot('responsive')
     })
   })
 
diff --git a/packages/app/src/debug/empty/DebugEmptyView.vue b/packages/app/src/debug/empty/DebugEmptyView.vue
index 73899f3a8d98..ce11dcef3449 100644
--- a/packages/app/src/debug/empty/DebugEmptyView.vue
+++ b/packages/app/src/debug/empty/DebugEmptyView.vue
@@ -24,18 +24,16 @@
         :rows="loadingRows"
       >
         <template #header>
-          <div class="bg-white border rounded-md flex border-gray-100 w-max p-5px text-14px text-gray-700">
-            <div><i-cy-status-failed_x12 /></div>
-            <div class="bg-gray-700 h-1px mx-5px mt-7px w-5px" />
-            <div
-              v-if="exampleTestName"
-              class="bg-gray-100 h-13px mx-1 pb-1px w-1px"
-            />
-            <div
-              v-if="exampleTestName"
-              class="mx-1 text-14px text-gray-700"
-            >
-              {{ exampleTestName }}
+          <div class="flex">
+            <div class="bg-white border rounded-md flex border-gray-100 py-4px px-8px text-14px text-gray-700 gap-8px items-center">
+              <i-cy-status-failed_x12 class="h-12px w-12px" />
+              <span>-</span>
+              <div
+                v-if="exampleTestName"
+                class="border-l border-gray-100 pl-8px"
+              >
+                {{ exampleTestName }}
+              </div>
             </div>
           </div>
         </template>

From e6a78f8558a4e85a8cdc1a4c7f1580f4cf836d8f Mon Sep 17 00:00:00 2001
From: Zachary Williams <zachjw34@gmail.com>
Date: Fri, 3 Feb 2023 13:27:58 -0600
Subject: [PATCH 2/2] add changelog entry

---
 cli/CHANGELOG.md | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md
index 2c72e3a7b770..460d30ff771c 100644
--- a/cli/CHANGELOG.md
+++ b/cli/CHANGELOG.md
@@ -1,4 +1,12 @@
  <!-- See the ../guides/writing-the-cypress-changelog.md for details on writing the changelog. -->
+## 12.6.0
+
+_Released 02/14/2023 (PENDING)_
+
+**Misc:**
+
+- Improved the layout of the Debug Page empty states on smaller viewports. Addressed in [#25703](https://github.com/cypress-io/cypress/pull/25703).
+
 ## 12.5.1
 
 _Released 02/10/2023_