misc: Improved the hitbox of grouped commands caret (#32783)

* misc: Improved the hitbox of grouped commands caret

* Fix the hitbox and add a test for nested withins

* changelog entry

* Fix flake in percy snapshot of running test

* update snapshot to take at the right state - put spinner icon back but don't animate it

Author: jennifer-shehane

cli/CHANGELOG.md

@@ -14,6 +14,7 @@ _Released 10/20/2025 (PENDING)_
 **Misc:**
 
 - Add top padding for command log labels. Addressed in [#32774](https://github.com/cypress-io/cypress/pull/32774).
+- The hitbox for expanding a grouped command has been widened. Addresses [#32778](https://github.com/cypress-io/cypress/issues/32778). Addressed in [#32783](https://github.com/cypress-io/cypress/pull/32783).
 - Have cursor on hover of the AUT URL to show as pointer. Addresses [#32777](https://github.com/cypress-io/cypress/issues/32777). Addressed in [#32782](https://github.com/cypress-io/cypress/pull/32782).
 
 **Dependency Updates:**

packages/app/cypress/e2e/runner/support/snapshot-reporter.ts

@@ -31,6 +31,10 @@ export const snapshotReporter = () => {
           // don't display command progress bar in snapshot
           $el.attr('style', 'display: none !important')
         },
+        '.runnable-active .runnable-state-icon animate': ($el) => {
+          // don't animate the test title spinner icon for an active test
+          $el.attr('repeatCount', '0')
+        },
       },
     })
   })

packages/app/cypress/e2e/runner/ui-states.cy.ts

@@ -152,6 +152,16 @@ describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 60
       cy.contains('verify element visibility state').should('be.visible').click()
       snapshotReporter()
     })
+
+    it('grouped commands', () => {
+      loadSpec({
+        filePath: 'runner/ui-states/commands.cy.js',
+        passCount: 9,
+      })
+
+      cy.contains('grouped commands').should('be.visible').click()
+      snapshotReporter()
+    })
   })
 
   it('status codes', () => {

packages/reporter/src/commands/commands.scss

@@ -137,7 +137,7 @@
   }
 
   .command-wrapper-text-group {
-    padding-left: 15px;
+    margin-left: 15px;
     width: 100%;
   }
 
@@ -148,6 +148,7 @@
   .nested-group-expander {
     .command-expander {
       position: relative;
+
       margin-left: -16px !important; // Adjust this value to center the caret on the border
     }
   }
@@ -515,7 +516,11 @@
     padding: 0;
     align-items: center;
     justify-content: center;
+    max-width: 33px;
     height: 28px;
+    width: 33px;
+    padding-left: 15px;
+    margin-left: -15px;
 
     .command-expander {
       margin: 0;

system-tests/project-fixtures/runner-specs/cypress/e2e/runner/ui-states/commands.cy.js

@@ -142,4 +142,18 @@ describe('Command Options and UI Display Tests', () => {
     cy.get('#scroll-horizontal button')
     .should('not.be.visible')
   })
+
+  it('grouped commands', () => {
+    cy.visit('cypress/fixtures/uiStates.html')
+
+    cy.get('html').within(() => {
+      cy.get('body').within(() => {
+        cy.get('form').within(() => {
+          cy.get('select').first().within(() => {
+            cy.get('option')
+          })
+        })
+      })
+    })
+  })
 })