From bcac9f2950e5ec4ffe289ebdc8db933c04dc5f72 Mon Sep 17 00:00:00 2001
From: estrada9166 <estrada9166@gmail.com>
Date: Mon, 19 May 2025 15:28:40 -0500
Subject: [PATCH 01/14] refactor: Update nested groups design

---
 packages/reporter/src/commands/command.tsx   | 23 +++++-
 packages/reporter/src/commands/commands.scss | 82 +++++++++++++-------
 2 files changed, 75 insertions(+), 30 deletions(-)

diff --git a/packages/reporter/src/commands/command.tsx b/packages/reporter/src/commands/command.tsx
index ab5dd6a5d2a4..21e0197503df 100644
--- a/packages/reporter/src/commands/command.tsx
+++ b/packages/reporter/src/commands/command.tsx
@@ -124,7 +124,7 @@ const NavColumns: React.FC<NavColumnsProps> = observer(({ model, isPinned, toggl
       {(!model._isPending() && isPinned) && <PinIcon className='command-pin' />}
       {(!model._isPending() && !isPinned) && model.number}
     </div>
-    {model.hasChildren && (
+    {model.hasChildren && !model.group && (
       <div className='command-expander-column' onClick={() => model.toggleOpen()}>
         <ChevronIcon className={cs('command-expander', { 'command-expander-is-open': model.hasChildren && !!model.isOpen })} />
       </div>
@@ -432,7 +432,10 @@ const Command: React.FC<CommandProps> = observer(({ model, aliasesWithDuplicates
     groupLevel = model.groupLevel < 6 ? model.groupLevel : 5
 
     for (let i = 1; i < groupLevel; i++) {
-      groupPlaceholder.push(<span key={`${groupId}-${i}`} className='command-group-block' />)
+      groupPlaceholder.push(<span key={`${groupId}-${i}`} className='command-group-block' onClick={(e) => {
+        e.stopPropagation()
+        model.toggleOpen()
+      }} />)
     }
   }
 
@@ -520,14 +523,26 @@ const Command: React.FC<CommandProps> = observer(({ model, aliasesWithDuplicates
             message='Printed output to your console'
             onClick={_toggleColumnPin}
             shouldShowMessage={_shouldShowClickMessage}
-            wrapperClassName={cs('command-pin-target', { 'command-group': !!groupId })}
+            wrapperClassName={cs('command-pin-target', { 'command-group': !!groupId, 'command-group-no-children': !model.hasChildren && model.group })}
           >
             <div
-              className='command-wrapper-text'
+              className={cs('command-wrapper-text', {
+                'command-wrapper-text-group': model.hasChildren && groupId,
+                'command-wrapper-text-group-parent': model.hasChildren && !groupId,
+              })}
               onMouseEnter={() => _snapshot(true)}
               onMouseLeave={() => _snapshot(false)}
             >
               {groupPlaceholder}
+
+              {model.hasChildren && groupId && (
+                <div className={cs('command-expander-column-group', { 'nested-group-expander': model.groupLevel })} onClick={(e) => {
+                  e.stopPropagation()
+                  model.toggleOpen()
+                }}>
+                  <ChevronIcon className={cs('command-expander', { 'command-expander-is-open': model.hasChildren && !!model.isOpen })} />
+                </div>
+              )}
               <CommandDetails model={model} groupId={groupId} aliasesWithDuplicates={aliasesWithDuplicates} />
               <CommandControls model={model} commandName={commandName} events={events} />
             </div>
diff --git a/packages/reporter/src/commands/commands.scss b/packages/reporter/src/commands/commands.scss
index 0ea33b2bddff..71261a2c5210 100644
--- a/packages/reporter/src/commands/commands.scss
+++ b/packages/reporter/src/commands/commands.scss
@@ -1,9 +1,12 @@
 @mixin nested-command-dashes($color) {
   border-left: 1px dotted $color;
   border-image-slice: 0 0 0 1;
-  border-image-source: repeating-linear-gradient(0deg, transparent, $color, $color 4px);
+  border-image-source: repeating-linear-gradient(0deg, transparent, $color, $color 2px);
 }
 
+/** Group indentation width for chevron and vertical lines */
+$group-indent-width: 18px;
+
 .reporter {
   // rendered within ../hooks/hooks.tsx
   .commands-container {
@@ -50,17 +53,6 @@
     }
   }
 
-  // Child Styles
-  .command-type-child {
-    .command-method {
-      &:before {
-        float: left;
-        content: "-";
-        margin-right: 2px;
-      }
-    }
-  }
-
   .command-wrapper {
     border-left: 2px solid $reporter-section-background;
     background-color: $reporter-section-background;
@@ -121,19 +113,39 @@
   // when no children, add padding to act as the .command-expander-column's width
   // to prevent adding another element to the page
   .command-number-column + span.command-pin-target {
-    margin-left: 25px;
+    margin-left: 14px;
   }
 
   .command-pin-target.command-group {
-    @include nested-command-dashes($gray-600);
-    padding-left: 12px;
+    @include nested-command-dashes($gray-700);
     min-height: 28px;
 
     .command-group-block {
-      @include nested-command-dashes($gray-600);
-      width: 12px;
+      @include nested-command-dashes($gray-700);
+      width: $group-indent-width;
+      min-width: $group-indent-width;
       min-height: 28px;
-      min-width: 12px;
+    }
+  }
+
+  .command-group-no-children {
+    padding-left: 15px; 
+  }
+
+  .command-wrapper-text-group {
+    padding-left: 15px;
+    width: 100%;
+
+  }
+
+  .command-wrapper-text-group-parent {
+    padding-left: 5px;
+  }
+
+  .nested-group-expander {   
+    .command-expander {
+      position: relative;
+      margin-left: -16px !important; // Adjust this value to center the caret on the border
     }
   }
 
@@ -454,7 +466,7 @@
     font-size: 12px;
     line-height: 1;
     margin-top: -1px;
-    margin-left: 10px;
+    margin-left: 12px;
     outline: none;
     text-align: right;
     width: 15px;
@@ -465,20 +477,14 @@
     }
   }
 
-  .command-expander-column {
+  %command-expander-base {
     flex-shrink: 0;
-    padding-left: 10px;
-    padding-right: 5px;
-    padding-top: 4px;
-    padding-bottom: 4px;
-    width: 25px;
     display: flex;
 
     .command-expander {
       color: $gray-500;
       transform: rotate(-90deg);
       transition: transform 150ms ease-out;
-      margin-top: 5px;
 
       path {
         stroke: $gray-700;
@@ -490,6 +496,30 @@
     }
   }
 
+  .command-expander-column {
+    @extend %command-expander-base;
+    padding: 4px 5px 4px 11px;
+    width: 25px;
+
+    .command-expander {
+      margin-top: 5px;
+    }
+  }
+
+  .command-expander-column-group {
+    @extend %command-expander-base;
+    padding: 0;
+    width: $group-indent-width;
+    min-width: $group-indent-width;
+    max-width: $group-indent-width;
+    align-items: center;
+    justify-content: center;
+
+    .command-expander {
+      margin: 0;
+    }
+  }
+
   .command-is-pinned {
     background: $indigo-1000;
     border-left: 2px solid $pinned;

From af8fe0461f2e32e070cc44e0410abb38092a6969 Mon Sep 17 00:00:00 2001
From: estrada9166 <estrada9166@gmail.com>
Date: Tue, 20 May 2025 12:08:09 -0500
Subject: [PATCH 02/14] Update styles

---
 packages/reporter/src/errors/errors.scss | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/reporter/src/errors/errors.scss b/packages/reporter/src/errors/errors.scss
index 203672a2c8dd..a8649bb13a6b 100644
--- a/packages/reporter/src/errors/errors.scss
+++ b/packages/reporter/src/errors/errors.scss
@@ -1,4 +1,5 @@
 $code-border-radius: 4px;
+$group-indent-width: 18px;
 
 .reporter {
   .error {
@@ -54,19 +55,19 @@ $code-border-radius: 4px;
   .recovered-test-err {
     .runnable-err-header,
     .runnable-err-body {
-      padding-left: 49px;
+      padding-left: 38px;
       display: flex;
 
       .err-group-block {
         border-left: 1px dotted $err-header-text;
         border-image-slice: 0 0 0 1;
-        border-image-source: repeating-linear-gradient(0deg, transparent, $err-header-text, $err-header-text 4px);
-        width: 12px;
-        min-width: 12px;
+        border-image-source: repeating-linear-gradient(0deg, transparent, $err-header-text, $err-header-text 2px);
+        width: $group-indent-width;
+        min-width: $group-indent-width;
 
         &:first-of-type {
-          width: 13px;
-          min-width: 13px;
+          width: 16px;
+          min-width: 16px;
         }
     } 
   }

From 18b54e87e531a27f4dd95c5079911995daa4344d Mon Sep 17 00:00:00 2001
From: estrada9166 <estrada9166@gmail.com>
Date: Wed, 21 May 2025 09:59:38 -0500
Subject: [PATCH 03/14] Enhance command method styling for child elements in
 the reporter. Updated the CommandDetails component to conditionally apply a
 class for child commands and added corresponding SCSS styles to display a
 prefix for child command methods.

---
 packages/reporter/src/commands/command.tsx   |  2 +-
 packages/reporter/src/commands/commands.scss | 11 +++++++++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/packages/reporter/src/commands/command.tsx b/packages/reporter/src/commands/command.tsx
index 21e0197503df..83d813126a53 100644
--- a/packages/reporter/src/commands/command.tsx
+++ b/packages/reporter/src/commands/command.tsx
@@ -326,7 +326,7 @@ interface CommandProps {
 
 const CommandDetails: React.FC<CommandDetailsProps> = observer(({ model, groupId, aliasesWithDuplicates }) => (
   <span className={cs('command-info')}>
-    <span className='command-method'>
+    <span className={cs('command-method', { 'command-method-child': !model.hasChildren })}>
       <span>
         {model.event && model.type !== 'system' ? `(${displayName(model)})` : displayName(model)}
       </span>
diff --git a/packages/reporter/src/commands/commands.scss b/packages/reporter/src/commands/commands.scss
index 71261a2c5210..ba6f09bdde97 100644
--- a/packages/reporter/src/commands/commands.scss
+++ b/packages/reporter/src/commands/commands.scss
@@ -53,6 +53,17 @@ $group-indent-width: 18px;
     }
   }
 
+  //  Child Styles
+   .command-type-child {
+    .command-method-child {
+      &:before {
+        float: left;
+        content: "-";
+        margin-right: 2px;
+      }
+    }
+  }
+
   .command-wrapper {
     border-left: 2px solid $reporter-section-background;
     background-color: $reporter-section-background;

From dc119b0be268b6c6eefc39dd2344275ae3a64d05 Mon Sep 17 00:00:00 2001
From: estrada9166 <estrada9166@gmail.com>
Date: Wed, 21 May 2025 10:00:21 -0500
Subject: [PATCH 04/14] Fix formatting in SCSS for child command styles by
 adjusting indentation for better readability.

---
 packages/reporter/src/commands/commands.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/reporter/src/commands/commands.scss b/packages/reporter/src/commands/commands.scss
index ba6f09bdde97..6fa9af567d50 100644
--- a/packages/reporter/src/commands/commands.scss
+++ b/packages/reporter/src/commands/commands.scss
@@ -53,8 +53,8 @@ $group-indent-width: 18px;
     }
   }
 
-  //  Child Styles
-   .command-type-child {
+  // Child Styles
+  .command-type-child {
     .command-method-child {
       &:before {
         float: left;

From 5e6a38e95e03fa6399882ec30cf818b30fa91ee8 Mon Sep 17 00:00:00 2001
From: Jennifer Shehane <shehane.jennifer@gmail.com>
Date: Wed, 21 May 2025 12:24:44 -0400
Subject: [PATCH 05/14] add chanagelog entry

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

diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md
index dc1499f62142..d990cb00f785 100644
--- a/cli/CHANGELOG.md
+++ b/cli/CHANGELOG.md
@@ -3,6 +3,10 @@
 
 _Released 6/3/2025 (PENDING)_
 
+**Misc:**
+
+- The design of commands that display as grouped (such as `.within()` and `cy.session()`) has been updated to provide better clarity when collapsing groups. Addressed in [#31739](https://github.com/cypress-io/cypress/pull/31739).
+
 **Dependency Updates:**
 
 - Updated `@sinonjs/fake-timers` from `10.3.0` to `11.3.1`. Addressed in [#31746](https://github.com/cypress-io/cypress/pull/31746).

From 836d02a76c37a7f7a2038d408c4e724eadb67953 Mon Sep 17 00:00:00 2001
From: estrada9166 <estrada9166@gmail.com>
Date: Wed, 21 May 2025 11:33:42 -0500
Subject: [PATCH 06/14] Enhance command expander styling by adding a parent
 class for better layout control and adjusting margin for command number
 column.

---
 packages/reporter/src/commands/command.tsx   | 2 +-
 packages/reporter/src/commands/commands.scss | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/reporter/src/commands/command.tsx b/packages/reporter/src/commands/command.tsx
index 83d813126a53..4af38732c94b 100644
--- a/packages/reporter/src/commands/command.tsx
+++ b/packages/reporter/src/commands/command.tsx
@@ -125,7 +125,7 @@ const NavColumns: React.FC<NavColumnsProps> = observer(({ model, isPinned, toggl
       {(!model._isPending() && !isPinned) && model.number}
     </div>
     {model.hasChildren && !model.group && (
-      <div className='command-expander-column' onClick={() => model.toggleOpen()}>
+      <div className='command-expander-column command-expander-column-parent' onClick={() => model.toggleOpen()}>
         <ChevronIcon className={cs('command-expander', { 'command-expander-is-open': model.hasChildren && !!model.isOpen })} />
       </div>
     )}
diff --git a/packages/reporter/src/commands/commands.scss b/packages/reporter/src/commands/commands.scss
index 6fa9af567d50..b409c2f244d2 100644
--- a/packages/reporter/src/commands/commands.scss
+++ b/packages/reporter/src/commands/commands.scss
@@ -124,7 +124,7 @@ $group-indent-width: 18px;
   // when no children, add padding to act as the .command-expander-column's width
   // to prevent adding another element to the page
   .command-number-column + span.command-pin-target {
-    margin-left: 14px;
+    margin-left: 25px;
   }
 
   .command-pin-target.command-group {
@@ -517,6 +517,10 @@ $group-indent-width: 18px;
     }
   }
 
+  .command-expander-column-parent {
+    margin-left: 11px;
+  }
+
   .command-expander-column-group {
     @extend %command-expander-base;
     padding: 0;

From 19e949b7e5f404943bb6562552d4515cd171976c Mon Sep 17 00:00:00 2001
From: estrada9166 <estrada9166@gmail.com>
Date: Wed, 21 May 2025 13:44:40 -0500
Subject: [PATCH 07/14] Update padding for error message styles in SCSS to
 improve layout consistency.

---
 packages/reporter/src/errors/errors.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/reporter/src/errors/errors.scss b/packages/reporter/src/errors/errors.scss
index a8649bb13a6b..9c75f4c3e8c9 100644
--- a/packages/reporter/src/errors/errors.scss
+++ b/packages/reporter/src/errors/errors.scss
@@ -55,7 +55,7 @@ $group-indent-width: 18px;
   .recovered-test-err {
     .runnable-err-header,
     .runnable-err-body {
-      padding-left: 38px;
+      padding-left: 49px;
       display: flex;
 
       .err-group-block {

From 48092fe053446e104d2cd3207139f0944e414d70 Mon Sep 17 00:00:00 2001
From: estrada9166 <estrada9166@gmail.com>
Date: Tue, 27 May 2025 10:52:11 -0500
Subject: [PATCH 08/14] Refactor SCSS styles and introduce mixins for gutter
 alignment and command info padding. Update error component styles for
 improved layout and consistency. Adjust padding and margins for better
 alignment across command and error sections.

---
 packages/reporter/src/commands/commands.scss | 15 ++++-------
 packages/reporter/src/errors/errors.scss     | 26 +++++++++++++-------
 packages/reporter/src/errors/test-error.tsx  |  4 ++-
 packages/reporter/src/lib/mixins.scss        | 15 +++++++++++
 packages/reporter/src/lib/variables.scss     |  2 ++
 5 files changed, 42 insertions(+), 20 deletions(-)

diff --git a/packages/reporter/src/commands/commands.scss b/packages/reporter/src/commands/commands.scss
index b409c2f244d2..66113dff1b1e 100644
--- a/packages/reporter/src/commands/commands.scss
+++ b/packages/reporter/src/commands/commands.scss
@@ -111,20 +111,15 @@ $group-indent-width: 18px;
   }
 
   .command-number-column {
+    @include gutter-alignment;
+
     color: #5a5f7a;
-    flex-shrink: 0;
-    min-height: 1px; // because some numbers are empty
-    max-height: 28px; // because some numbers are empty
-    padding-top: 4px;
-    padding-bottom: 4px;
-    text-align: right;
-    width: 24px;
   }
 
   // when no children, add padding to act as the .command-expander-column's width
   // to prevent adding another element to the page
   .command-number-column + span.command-pin-target {
-    margin-left: 25px;
+    margin-left: $gutter-margin;
   }
 
   .command-pin-target.command-group {
@@ -161,12 +156,12 @@ $group-indent-width: 18px;
   }
 
   .command-info {
+    @include command-info-padding;
+
     display: -webkit-box;
     font-weight: 600;
     margin-left: 0;
     overflow: hidden;
-    padding-top: 4px;
-    padding-bottom: 4px;
     width: 100%;
     -webkit-line-clamp: 100;
     -webkit-box-orient: vertical;
diff --git a/packages/reporter/src/errors/errors.scss b/packages/reporter/src/errors/errors.scss
index 9c75f4c3e8c9..2f33f173843d 100644
--- a/packages/reporter/src/errors/errors.scss
+++ b/packages/reporter/src/errors/errors.scss
@@ -55,7 +55,7 @@ $group-indent-width: 18px;
   .recovered-test-err {
     .runnable-err-header,
     .runnable-err-body {
-      padding-left: 49px;
+      padding-left: 38px;
       display: flex;
 
       .err-group-block {
@@ -72,9 +72,6 @@ $group-indent-width: 18px;
     } 
   }
 
-    .runnable-err-header > .runnable-err-name {
-      padding: 5px 4px 5px 15px;
-    }
 
     .runnable-err-content {
       padding: 0 12px 0 0;
@@ -111,20 +108,31 @@ $group-indent-width: 18px;
     display: flex;
     font-weight: bold;
     justify-content: space-between;
-    padding-left: 18px;
 
-    svg {
-      color: $red-400;
-      align-self: center
+    .runnable-err-icon {
+      @include gutter-alignment;
+
+      &.runnable-err-icon-group {
+        width: auto;
+      }
+      
+      svg {
+        color: $red-400;
+        align-self: center
+      }
     }
 
+ 
     .runnable-err-name {
+      @include command-info-padding;
+
       color: $err-header-text;
       flex: auto;
       font-size: 12px;
       font-weight: 600;
       line-height: 20px;
-      padding: 5px 4px 5px 24px;
+
+      margin-left: $gutter-margin;
     }
   }
 
diff --git a/packages/reporter/src/errors/test-error.tsx b/packages/reporter/src/errors/test-error.tsx
index c27bac1b841d..a4cbb6d1224e 100644
--- a/packages/reporter/src/errors/test-error.tsx
+++ b/packages/reporter/src/errors/test-error.tsx
@@ -74,7 +74,9 @@ const TestError: React.FC<TestErrorProps> = ({ err, groupLevel = 0, testId, comm
     <div className={cs('runnable-err', { 'recovered-test-err': err.isRecovered })}>
       <div className='runnable-err-header'>
         {groupPlaceholder}
-        <WarningIcon />
+        <div className={cs('runnable-err-icon', { 'runnable-err-icon-group': groupPlaceholder.length > 0 })}>
+          <WarningIcon />
+        </div>
         <div className='runnable-err-name'>
           {err.name}
         </div>
diff --git a/packages/reporter/src/lib/mixins.scss b/packages/reporter/src/lib/mixins.scss
index 6939b841b53c..3dfb24e6142e 100644
--- a/packages/reporter/src/lib/mixins.scss
+++ b/packages/reporter/src/lib/mixins.scss
@@ -29,3 +29,18 @@
     bottom: 0;
   }
 }
+
+@mixin gutter-alignment {
+  flex-shrink: 0;
+  min-height: 1px; // because some numbers are empty
+  max-height: 28px; // because some numbers are empty
+  padding-top: 4px;
+  padding-bottom: 4px;
+  text-align: right;
+  width: 24px;
+}
+
+@mixin command-info-padding {
+  padding-top: 4px;
+  padding-bottom: 4px;
+}
\ No newline at end of file
diff --git a/packages/reporter/src/lib/variables.scss b/packages/reporter/src/lib/variables.scss
index 88dfbb021245..77726a86f22c 100644
--- a/packages/reporter/src/lib/variables.scss
+++ b/packages/reporter/src/lib/variables.scss
@@ -127,3 +127,5 @@ $font-sans: 'Fira Mono', 'Helvetica Neue', 'Arial', sans-serif;
 $open-sans: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 $monospace: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
 $font-system: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
+
+$gutter-margin: 14px;
\ No newline at end of file

From f87fb2e9947a9315c968bd4e92ce7268f7318f38 Mon Sep 17 00:00:00 2001
From: estrada9166 <estrada9166@gmail.com>
Date: Tue, 27 May 2025 10:59:14 -0500
Subject: [PATCH 09/14] Refactor command styles by removing redundant class
 names and consolidating group indentation styles into a mixin. Update SCSS
 files to utilize the new mixin for consistent width handling across command
 and error components.

---
 packages/reporter/src/commands/command.tsx   |  2 +-
 packages/reporter/src/commands/commands.scss | 15 ++++-----------
 packages/reporter/src/errors/errors.scss     |  5 ++---
 packages/reporter/src/lib/mixins.scss        |  6 ++++++
 4 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/packages/reporter/src/commands/command.tsx b/packages/reporter/src/commands/command.tsx
index 4af38732c94b..83d813126a53 100644
--- a/packages/reporter/src/commands/command.tsx
+++ b/packages/reporter/src/commands/command.tsx
@@ -125,7 +125,7 @@ const NavColumns: React.FC<NavColumnsProps> = observer(({ model, isPinned, toggl
       {(!model._isPending() && !isPinned) && model.number}
     </div>
     {model.hasChildren && !model.group && (
-      <div className='command-expander-column command-expander-column-parent' onClick={() => model.toggleOpen()}>
+      <div className='command-expander-column' onClick={() => model.toggleOpen()}>
         <ChevronIcon className={cs('command-expander', { 'command-expander-is-open': model.hasChildren && !!model.isOpen })} />
       </div>
     )}
diff --git a/packages/reporter/src/commands/commands.scss b/packages/reporter/src/commands/commands.scss
index 66113dff1b1e..290869c55e0f 100644
--- a/packages/reporter/src/commands/commands.scss
+++ b/packages/reporter/src/commands/commands.scss
@@ -4,9 +4,6 @@
   border-image-source: repeating-linear-gradient(0deg, transparent, $color, $color 2px);
 }
 
-/** Group indentation width for chevron and vertical lines */
-$group-indent-width: 18px;
-
 .reporter {
   // rendered within ../hooks/hooks.tsx
   .commands-container {
@@ -128,8 +125,7 @@ $group-indent-width: 18px;
 
     .command-group-block {
       @include nested-command-dashes($gray-700);
-      width: $group-indent-width;
-      min-width: $group-indent-width;
+      @include group-indent-width;
       min-height: 28px;
     }
   }
@@ -512,16 +508,13 @@ $group-indent-width: 18px;
     }
   }
 
-  .command-expander-column-parent {
-    margin-left: 11px;
-  }
+ 
 
   .command-expander-column-group {
     @extend %command-expander-base;
+    @include group-indent-width;
+
     padding: 0;
-    width: $group-indent-width;
-    min-width: $group-indent-width;
-    max-width: $group-indent-width;
     align-items: center;
     justify-content: center;
 
diff --git a/packages/reporter/src/errors/errors.scss b/packages/reporter/src/errors/errors.scss
index 2f33f173843d..c9bd40049ddf 100644
--- a/packages/reporter/src/errors/errors.scss
+++ b/packages/reporter/src/errors/errors.scss
@@ -1,5 +1,4 @@
 $code-border-radius: 4px;
-$group-indent-width: 18px;
 
 .reporter {
   .error {
@@ -59,11 +58,11 @@ $group-indent-width: 18px;
       display: flex;
 
       .err-group-block {
+        @include group-indent-width;
+        
         border-left: 1px dotted $err-header-text;
         border-image-slice: 0 0 0 1;
         border-image-source: repeating-linear-gradient(0deg, transparent, $err-header-text, $err-header-text 2px);
-        width: $group-indent-width;
-        min-width: $group-indent-width;
 
         &:first-of-type {
           width: 16px;
diff --git a/packages/reporter/src/lib/mixins.scss b/packages/reporter/src/lib/mixins.scss
index 3dfb24e6142e..de13de9f57c9 100644
--- a/packages/reporter/src/lib/mixins.scss
+++ b/packages/reporter/src/lib/mixins.scss
@@ -43,4 +43,10 @@
 @mixin command-info-padding {
   padding-top: 4px;
   padding-bottom: 4px;
+}
+
+@mixin group-indent-width {
+  width: 18px;
+  min-width: 18px;
+  max-width: 18px;
 }
\ No newline at end of file

From 79741bc35fcbcde0ea6c351a1a2db7fa034720e2 Mon Sep 17 00:00:00 2001
From: estrada9166 <estrada9166@gmail.com>
Date: Tue, 27 May 2025 13:37:38 -0500
Subject: [PATCH 10/14] Enhance SCSS mixins by adding align-self property for
 improved layout consistency in command info and group indentation styles.

---
 packages/reporter/src/lib/mixins.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/reporter/src/lib/mixins.scss b/packages/reporter/src/lib/mixins.scss
index de13de9f57c9..a41ff84a908a 100644
--- a/packages/reporter/src/lib/mixins.scss
+++ b/packages/reporter/src/lib/mixins.scss
@@ -38,11 +38,13 @@
   padding-bottom: 4px;
   text-align: right;
   width: 24px;
+  align-self: center;
 }
 
 @mixin command-info-padding {
   padding-top: 4px;
   padding-bottom: 4px;
+  align-self: center;
 }
 
 @mixin group-indent-width {

From 872a5a1092ee182ac2e11a9088bc0fd591045fe6 Mon Sep 17 00:00:00 2001
From: estrada9166 <estrada9166@gmail.com>
Date: Tue, 27 May 2025 14:47:04 -0500
Subject: [PATCH 11/14] Remove redundant align-self property from SCSS mixin
 for command info and add logging and expectation in Cypress test for improved
 clarity in UI state tests.

---
 packages/reporter/src/lib/mixins.scss                          | 1 -
 .../cypress/e2e/runner/ui-states/commandsToDisplay.cy.js       | 3 ++-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/reporter/src/lib/mixins.scss b/packages/reporter/src/lib/mixins.scss
index a41ff84a908a..a8f51eb474f8 100644
--- a/packages/reporter/src/lib/mixins.scss
+++ b/packages/reporter/src/lib/mixins.scss
@@ -38,7 +38,6 @@
   padding-bottom: 4px;
   text-align: right;
   width: 24px;
-  align-self: center;
 }
 
 @mixin command-info-padding {
diff --git a/system-tests/project-fixtures/runner-specs/cypress/e2e/runner/ui-states/commandsToDisplay.cy.js b/system-tests/project-fixtures/runner-specs/cypress/e2e/runner/ui-states/commandsToDisplay.cy.js
index 41a9df7c18b6..2f4c5b0a396a 100644
--- a/system-tests/project-fixtures/runner-specs/cypress/e2e/runner/ui-states/commandsToDisplay.cy.js
+++ b/system-tests/project-fixtures/runner-specs/cypress/e2e/runner/ui-states/commandsToDisplay.cy.js
@@ -112,7 +112,8 @@ describe('Commands to display in UI', () => {
     cy.window()
 
     cy.get('div').first().within(() => {
-
+      cy.log('message')
+      cy.expect(1).to.equal(1)
     })
 
     cy.wrap({ foo: 'bar' })

From f6471e10a171a4b8733f048b95f21a739987e439 Mon Sep 17 00:00:00 2001
From: estrada9166 <estrada9166@gmail.com>
Date: Tue, 27 May 2025 16:40:53 -0500
Subject: [PATCH 12/14] Use snapshotReporter instead

---
 .../app/cypress/e2e/runner/ui-states.cy.ts    | 37 ++++++++++---------
 1 file changed, 19 insertions(+), 18 deletions(-)

diff --git a/packages/app/cypress/e2e/runner/ui-states.cy.ts b/packages/app/cypress/e2e/runner/ui-states.cy.ts
index 8429223b6024..21830b93f65a 100644
--- a/packages/app/cypress/e2e/runner/ui-states.cy.ts
+++ b/packages/app/cypress/e2e/runner/ui-states.cy.ts
@@ -1,3 +1,4 @@
+import { snapshotReporter } from './support/snapshot-reporter'
 import { loadSpec } from './support/spec-loader'
 
 describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 600000 }, () => {
@@ -12,7 +13,7 @@ describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 60
     })
 
     cy.contains('test hooks').should('be.visible')
-    cy.percySnapshot()
+    snapshotReporter()
   })
 
   it('nested tests', () => {
@@ -22,7 +23,7 @@ describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 60
     })
 
     cy.contains('Nested Tests').should('be.visible')
-    cy.percySnapshot()
+    snapshotReporter()
   })
 
   describe('commands', () => {
@@ -33,7 +34,7 @@ describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 60
       })
 
       cy.contains('part 1 - basic commands').should('be.visible').click()
-      cy.percySnapshot()
+      snapshotReporter()
     })
 
     it('part 2 - traversal and navigation', () => {
@@ -45,7 +46,7 @@ describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 60
       cy.contains('part 2 - traversal and navigation').should('be.visible')
       .click()
 
-      cy.percySnapshot()
+      snapshotReporter()
     })
 
     it('part 3 - element manipulation', () => {
@@ -57,7 +58,7 @@ describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 60
       cy.contains('part 3 - element manipulation').should('be.visible')
       .click()
 
-      cy.percySnapshot()
+      snapshotReporter()
     })
 
     it('part 4 - advanced interactions', () => {
@@ -69,7 +70,7 @@ describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 60
       cy.contains('part 4 - advanced interactions').should('be.visible')
       .click()
 
-      cy.percySnapshot()
+      snapshotReporter()
     })
 
     it('commands that do not appear in command log', () => {
@@ -79,7 +80,7 @@ describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 60
       })
 
       cy.contains('commands that do not appear in command log').should('be.visible').click()
-      cy.percySnapshot()
+      snapshotReporter()
     })
 
     it('form interaction command options', () => {
@@ -89,7 +90,7 @@ describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 60
       })
 
       cy.contains('form interaction command options').should('be.visible').click()
-      cy.percySnapshot()
+      snapshotReporter()
     })
 
     it('DOM traversal command options', () => {
@@ -99,7 +100,7 @@ describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 60
       })
 
       cy.contains('DOM traversal command options').should('be.visible').click()
-      cy.percySnapshot()
+      snapshotReporter()
     })
 
     it('element state and navigation command options', () => {
@@ -109,7 +110,7 @@ describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 60
       })
 
       cy.contains('element state and navigation command options').should('be.visible').click()
-      cy.percySnapshot()
+      snapshotReporter()
     })
 
     it('element traversal and file operations command options', () => {
@@ -119,7 +120,7 @@ describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 60
       })
 
       cy.contains('element traversal and file operations command options').should('be.visible').click()
-      cy.percySnapshot()
+      snapshotReporter()
     })
 
     it('scrolling and form interaction command options', () => {
@@ -129,7 +130,7 @@ describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 60
       })
 
       cy.contains('scrolling and form interaction command options').should('be.visible').click()
-      cy.percySnapshot()
+      snapshotReporter()
     })
 
     it('user interaction and window command options', () => {
@@ -139,7 +140,7 @@ describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 60
       })
 
       cy.contains('user interaction and window command options').should('be.visible').click()
-      cy.percySnapshot()
+      snapshotReporter()
     })
 
     it('verify element visibility state', () => {
@@ -149,7 +150,7 @@ describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 60
       })
 
       cy.contains('verify element visibility state').should('be.visible').click()
-      cy.percySnapshot()
+      snapshotReporter()
     })
   })
 
@@ -160,7 +161,7 @@ describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 60
     })
 
     cy.contains('Request Statuses').should('be.visible')
-    cy.percySnapshot()
+    snapshotReporter()
   })
 
   it('page events', () => {
@@ -170,7 +171,7 @@ describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 60
     })
 
     cy.contains('events - page events').should('be.visible')
-    cy.percySnapshot()
+    snapshotReporter()
   })
 
   describe('errors', () => {
@@ -181,7 +182,7 @@ describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 60
       })
 
       cy.contains('simple error with docs link').should('be.visible')
-      cy.percySnapshot()
+      snapshotReporter()
     })
 
     it('long error', () => {
@@ -192,7 +193,7 @@ describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 60
 
       cy.contains('simple error with docs link').click()
       cy.contains('long error').should('be.visible')
-      cy.percySnapshot()
+      snapshotReporter()
     })
   })
 })

From b344f56dff400a1ab79631b84c2462d4fe6c82d6 Mon Sep 17 00:00:00 2001
From: estrada9166 <estrada9166@gmail.com>
Date: Tue, 27 May 2025 16:55:11 -0500
Subject: [PATCH 13/14] Refactor snapshotReporter to dynamically set width
 based on reporter panel size, improving snapshot accuracy and visibility of
 UI elements.

---
 .../e2e/runner/support/snapshot-reporter.ts   | 46 ++++++++++---------
 1 file changed, 25 insertions(+), 21 deletions(-)

diff --git a/packages/app/cypress/e2e/runner/support/snapshot-reporter.ts b/packages/app/cypress/e2e/runner/support/snapshot-reporter.ts
index dc4e91125ae4..2ce809c57f02 100644
--- a/packages/app/cypress/e2e/runner/support/snapshot-reporter.ts
+++ b/packages/app/cypress/e2e/runner/support/snapshot-reporter.ts
@@ -1,26 +1,30 @@
 // Takes percy snapshot with navigation/AUT/reporter hidden
 export const snapshotReporter = () => {
-  cy.percySnapshot({
-    width: 450,
-    elementOverrides: {
-      '.cy-tooltip': true,
-      '[data-cy=sidebar]': ($el) => {
-        $el.attr('style', 'display: none !important')
+  cy.get('[data-cy=reporter-panel]')
+  .invoke('width')
+  .then((w) => {
+    cy.percySnapshot({
+      width: w,
+      elementOverrides: {
+        '.cy-tooltip': true,
+        '[data-cy=sidebar]': ($el) => {
+          $el.attr('style', 'display: none !important')
+        },
+        '[data-cy=aut-panel]': ($el) => {
+          $el.attr('style', 'display: none !important')
+        },
+        '[data-cy=reporter-panel]': ($el) => {
+          $el.attr('style', `width: ${w}px !important`)
+        },
+        '[data-cy=reporter-running-icon]': ($el) => {
+          // remove 'fa-spin' class so that the icon is not animated
+          $el.attr('class', '')
+        },
+        '.command-progress': ($el) => {
+          // don't display command progress bar in snapshot
+          $el.attr('style', 'display: none !important')
+        },
       },
-      '[data-cy=aut-panel]': ($el) => {
-        $el.attr('style', 'display: none !important')
-      },
-      '[data-cy=reporter-panel]': ($el) => {
-        $el.attr('style', 'width: 450px !important')
-      },
-      '[data-cy=reporter-running-icon]': ($el) => {
-        // remove 'fa-spin' class so that the icon is not animated
-        $el.attr('class', '')
-      },
-      '.command-progress': ($el) => {
-        // don't display command progress bar in snapshot
-        $el.attr('style', 'display: none !important')
-      },
-    },
+    })
   })
 }

From 86d8816c04f0829bdbdca6b94282ee07dde7c23e Mon Sep 17 00:00:00 2001
From: estrada9166 <estrada9166@gmail.com>
Date: Wed, 28 May 2025 09:44:06 -0500
Subject: [PATCH 14/14] Update snapshotReporter to include sidebar width in
 percy snapshots, enhancing UI element visibility and accuracy.

---
 .../e2e/runner/support/snapshot-reporter.ts     | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/packages/app/cypress/e2e/runner/support/snapshot-reporter.ts b/packages/app/cypress/e2e/runner/support/snapshot-reporter.ts
index 2ce809c57f02..1107cf56dccc 100644
--- a/packages/app/cypress/e2e/runner/support/snapshot-reporter.ts
+++ b/packages/app/cypress/e2e/runner/support/snapshot-reporter.ts
@@ -1,10 +1,20 @@
 // Takes percy snapshot with navigation/AUT/reporter hidden
 export const snapshotReporter = () => {
-  cy.get('[data-cy=reporter-panel]')
+  let sidebarWidth = 0
+
+  cy.get('[data-cy=sidebar]')
+  .invoke('width')
+  .then((w) => {
+    if (w) {
+      sidebarWidth = w
+    }
+  }).then(() => {
+    cy.get('[data-cy=reporter-panel]')
+  })
   .invoke('width')
   .then((w) => {
     cy.percySnapshot({
-      width: w,
+      width: w + sidebarWidth,
       elementOverrides: {
         '.cy-tooltip': true,
         '[data-cy=sidebar]': ($el) => {
@@ -13,9 +23,6 @@ export const snapshotReporter = () => {
         '[data-cy=aut-panel]': ($el) => {
           $el.attr('style', 'display: none !important')
         },
-        '[data-cy=reporter-panel]': ($el) => {
-          $el.attr('style', `width: ${w}px !important`)
-        },
         '[data-cy=reporter-running-icon]': ($el) => {
           // remove 'fa-spin' class so that the icon is not animated
           $el.attr('class', '')