From 26440286781593285a5e050d3c3e615d5ded05fc Mon Sep 17 00:00:00 2001
From: Zachary Williams <ZachJW34@gmail.com>
Date: Tue, 7 Feb 2023 22:03:50 -0600
Subject: [PATCH] chore: debug page tooltip distance and artifact border
 (#25727)

* misc: debug page tooltip distance and artifact border

* add changelog entry

* fix CT test
---
 cli/CHANGELOG.md                                | 1 +
 packages/app/src/debug/DebugArtifactLink.cy.tsx | 2 +-
 packages/app/src/debug/DebugArtifactLink.vue    | 4 +++-
 packages/app/src/debug/DebugFailedTest.vue      | 2 +-
 packages/app/src/debug/DebugSpec.vue            | 5 +++--
 5 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md
index d62f144c9010..1d9bfef2f316 100644
--- a/cli/CHANGELOG.md
+++ b/cli/CHANGELOG.md
@@ -16,6 +16,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).
+- 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/DebugArtifactLink.cy.tsx b/packages/app/src/debug/DebugArtifactLink.cy.tsx
index 919abc703d88..196da01d36ce 100644
--- a/packages/app/src/debug/DebugArtifactLink.cy.tsx
+++ b/packages/app/src/debug/DebugArtifactLink.cy.tsx
@@ -11,7 +11,7 @@ describe('<DebugArtifacts />', () => {
   it('mounts correctly, provides expected tooltip content, and emits correct event', () => {
     artifactMapping.forEach((artifact) => {
       cy.mount(() => (
-        <DebugArtifactLink icon={artifact.icon} popperText={artifact.text} url={artifact.url}/>
+        <DebugArtifactLink class="m-24px inline-flex" icon={artifact.icon} popperText={artifact.text} url={artifact.url}/>
       ))
 
       cy.findByTestId(`artifact-for-${artifact.icon}`).should('have.length', 1)
diff --git a/packages/app/src/debug/DebugArtifactLink.vue b/packages/app/src/debug/DebugArtifactLink.vue
index 635705840128..b1fa3cc31160 100644
--- a/packages/app/src/debug/DebugArtifactLink.vue
+++ b/packages/app/src/debug/DebugArtifactLink.vue
@@ -2,9 +2,10 @@
   <Tooltip
     placement="bottom"
     :data-cy="`artifact-for-${icon}`"
+    :distance="8"
   >
     <ExternalLink
-      class="flex h-full w-full items-center justify-center"
+      class="flex h-24px w-24px justify-center items-center hocus:rounded-md group hocus:border-1px hocus:border-indigo-500"
       :data-cy="`${icon}-button`"
       :href="props.url || '#'"
       :use-default-hocus="true"
@@ -16,6 +17,7 @@
         fill-color="gray-100"
         hocus-stroke-color="indigo-500"
         hocus-fill-color="indigo-100"
+        interactive-colors-on-group
       />
     </ExternalLink>
     <template #popper>
diff --git a/packages/app/src/debug/DebugFailedTest.vue b/packages/app/src/debug/DebugFailedTest.vue
index cb4d741b2157..e08e23f1af05 100644
--- a/packages/app/src/debug/DebugFailedTest.vue
+++ b/packages/app/src/debug/DebugFailedTest.vue
@@ -48,7 +48,7 @@
     <div
       v-if="!props.expandable"
       data-cy="debug-artifacts"
-      class="flex flex-grow space-x-4.5 opacity-0 px-18px justify-end test-row-artifacts"
+      class="flex flex-grow opacity-0 px-18px gap-16px justify-end test-row-artifacts"
     >
       <div
         v-for="result, i in failedTestData.debugArtifacts"
diff --git a/packages/app/src/debug/DebugSpec.vue b/packages/app/src/debug/DebugSpec.vue
index e18b299596bd..72f9bbe4abd4 100644
--- a/packages/app/src/debug/DebugSpec.vue
+++ b/packages/app/src/debug/DebugSpec.vue
@@ -142,6 +142,7 @@
             color="dark"
             :is-interactive="!!(runAllFailuresState.cta)"
             :disabled="!runAllFailuresState.disabled"
+            :distance="8"
           >
             <Button
               data-cy="run-failures"
@@ -186,9 +187,9 @@
       <div
         v-for="thumbprint in Object.keys(specData.failedTests)"
         :key="`test-${thumbprint}`"
-        :data-cy="`test-group`"
+        data-cy="test-group"
         class="flex flex-col flex-start border-b-gray-100 border-b-1px w-full pr-16px pl-16px justify-center"
-        :class="Object.keys(specData.groups).length > 1 ? 'pb-16px': 'hover:bg-gray-50'"
+        :class="Object.keys(specData.groups).length > 1 ? 'pb-16px': 'hover:bg-gray-50 focus-within:bg-gray-50'"
       >
         <DebugFailedTest
           v-if="specData.failedTests[thumbprint].length >= 1"