misc: set min widths for icons (cypress-io#25684)

marktnoonan · mike-plummer · web-flow · commit 0f7dc27926e3 · 2023-02-05T14:01:55.000-05:00
Co-authored-by: Mike Plummer &lt;mikep@cypress.io&gt;
diff --git 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:**
+
+- Icons in Debug page will no longer shrink at small viewports. Addresses [#25665](https://github.com/cypress-io/cypress/issues/25665).
+
 ## 12.5.1
 
 _Released 02/10/2023_
diff --git a/packages/app/src/debug/DebugFailedTest.vue b/packages/app/src/debug/DebugFailedTest.vue
@@ -7,7 +7,7 @@
       size="16"
       status="failed"
       data-cy="failed-icon"
-      class="isolate"
+      class="min-w-16px isolate"
     />
     <template
       v-for="{text, type}, index in failedTestData.mappedTitleParts"
diff --git a/packages/app/src/debug/DebugSpec.vue b/packages/app/src/debug/DebugSpec.vue
@@ -20,7 +20,9 @@
               stroke-color="gray-500"
               fill-color="gray-100"
               size="16"
+              class="min-w-16px"
             />
+
             <div
               data-cy="spec-path"
               class="flex-grow text-base non-italic truncate"
diff --git a/packages/app/src/debug/GroupedDebugFailedTest.cy.tsx b/packages/app/src/debug/GroupedDebugFailedTest.cy.tsx
@@ -80,7 +80,7 @@ describe('<GroupedDebugFailedTest/>', () => {
 
     cy.findAllByTestId(`grouped-row`).should('have.length', 2).each((el) => cy.wrap(el).within(() => {
       cy.findByTestId('debug-artifacts').should('not.be.visible')
-      cy.wrap(el).realHover()
+      cy.findByTestId('test-failed-metadata').realHover()
       cy.findByTestId('debug-artifacts').should('be.visible').children().should('have.length', 3)
       cy.findByTestId('stats-metadata').children().should('have.length', 3)
     }))
