misc: remove border-bottom if test is isolated in studio mode (#32492)

Author: kurekszymon

cli/CHANGELOG.md

@@ -10,6 +10,7 @@ _Released 9/23/2025 (PENDING)_
 **Misc:**
 
 - Update the styles for command grouping 'line' so on expansion it is displayed correctly. Addressed in [#32521](https://github.com/cypress-io/cypress/pull/32521)
+- Updated the Cypress Studio panel to not show bottom border. Addresses [#32478](https://github.com/cypress-io/cypress/issues/32478).
 
 **Dependency Updates:**
 

packages/reporter/src/attempts/attempts.scss

@@ -40,6 +40,11 @@
         }
       }
     }
+
+    &.single-studio-test {
+      border-right: none;
+      border-bottom: none;
+    }
   }
 
   .attempt-error-region {

packages/reporter/src/attempts/attempts.tsx

@@ -88,12 +88,14 @@ Attempt.displayName = 'Attempt'
 
 interface AttemptsProps {
   test: TestModel
+  isSingleStudioTest?: boolean
   scrollIntoView: Function
 }
 
-const Attempts: React.FC<AttemptsProps> = observer(({ test, scrollIntoView }: AttemptsProps) => {
+const Attempts: React.FC<AttemptsProps> = observer(({ test, isSingleStudioTest, scrollIntoView }: AttemptsProps) => {
   return (<ul className={cs('attempts', {
     'has-multiple-attempts': test.hasMultipleAttempts,
+    'single-studio-test': Boolean(isSingleStudioTest),
   })}>
     {test.attempts.map((attempt) => {
       return (

packages/reporter/src/studio/StudioTest.cy.tsx

@@ -33,7 +33,46 @@ describe('StudioTest', () => {
       title: 'should display correct content',
       state: 'passed',
       parentTitle: 'Example Test Suite > Nested Suite',
-      attempts: [],
+      attempts: [
+        {
+          id: 'attempt-1',
+          state: 'passed',
+          hooks: [
+            {
+              id: 'hook-1',
+              type: 'hook',
+              name: 'test body',
+              hookName: 'test body',
+              state: 'passed',
+              duration: 1000,
+              commands: [
+                {
+                  id: 'command-1',
+                  type: 'command',
+                  name: 'command-1',
+                  state: 'passed',
+                  duration: 1000,
+                  _isPending: () => false,
+                  renderProps: {},
+                  displayMessage: null,
+                },
+              ],
+            },
+          ],
+          hookCount: {
+            'before all': 0,
+            'before each': 0,
+            'after all': 0,
+            'after each': 0,
+            'test body': 1,
+          },
+          hasCommands: true,
+          isOpen: true,
+          sessions: [],
+          agents: [],
+          routes: [],
+        },
+      ],
       callbackAfterUpdate: cy.stub().as('callbackAfterUpdate'),
     } as unknown as Test
 
@@ -72,6 +111,7 @@ describe('StudioTest', () => {
     cy.get('.studio-single-test-container').should('be.visible')
     cy.get('.studio-header__test-section').should('be.visible')
     cy.get('.studio-single-test-attempts').should('be.visible')
+    cy.get('.attempts.single-studio-test').should('have.css', 'border-bottom-style', 'none').and('have.css', 'border-right-style', 'none')
     cy.get('[data-cy="studio-single-test-title"]').should('contain.text', 'should display correct content')
     cy.get('[data-cy="spec-duration"]').should('contain', '00:02')
     cy.percySnapshot()

packages/reporter/src/studio/StudioTest.tsx

@@ -104,7 +104,7 @@ export const StudioTest = observer(({ appState, runnablesStore, statsStore }: St
           </div>
         </div>
         <div className='studio-single-test-attempts' ref={containerRef}>
-          <Attempts test={currentTest} scrollIntoView={scrollIntoView} />
+          <Attempts isSingleStudioTest test={currentTest} scrollIntoView={scrollIntoView} />
         </div>
       </div>
     )