misc: improve debug loading text wrap responsiveness (#25703)

cypress-io · Feb 8, 2023 · 9aad2aa · 9aad2aa · cypress-bot · Feb 8, 2023
1 parent 76adebe
commit 9aad2aa
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 12 deletions.
diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md
@@ -17,6 +17,7 @@ _Released 02/14/2023 (PENDING)_
 - Improved the layout of the Debug Page on smaller viewports when there is a pending run. Addresses [#25664](https://github.com/cypress-io/cypress/issues/25664).
 - Improved the layout of the Debug Page when displaying informational messages. Addresses [#25669](https://github.com/cypress-io/cypress/issues/25669).
 - Icons in Debug page will no longer shrink at small viewports. Addresses [#25665](https://github.com/cypress-io/cypress/issues/25665).
+- Improved the layout of the Debug Page empty states on smaller viewports. Addressed in [#25703](https://github.com/cypress-io/cypress/pull/25703).
 - Increased the spacing between elements and their associated tooltip and added borders around artifact links on the Debug Page. Addresses [#25666](https://github.com/cypress-io/cypress/issues/25666).
 
 **Dependency Updates:**

diff --git 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
@@ -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>