From 2443abe6e823a800652cfee7421574719bf9566e Mon Sep 17 00:00:00 2001 From: Mabel Amaya Date: Tue, 28 Oct 2025 09:51:08 -0400 Subject: [PATCH 1/5] misc: make studio test name header sticky --- packages/reporter/src/studio/StudioTest.scss | 15 ++++++++++ packages/reporter/src/studio/StudioTest.tsx | 29 +++++++++++++++++--- 2 files changed, 40 insertions(+), 4 deletions(-) diff --git a/packages/reporter/src/studio/StudioTest.scss b/packages/reporter/src/studio/StudioTest.scss index a45f9e05b81..39031e8a473 100644 --- a/packages/reporter/src/studio/StudioTest.scss +++ b/packages/reporter/src/studio/StudioTest.scss @@ -15,6 +15,21 @@ font-size: 14px; line-height: 20px; flex-shrink: 0; + position: sticky; + top: 0; + z-index: 1; + background-color: $gray-1100; + + &.shadow-active::after { + content: ""; + position: absolute; + top: 101%; + left: 0; + right: 0; + height: 16px; + background: linear-gradient(to bottom, $gray-1100 0%, rgba(22, 24, 39, 0.3) 100%); + pointer-events: none; + } .state-icon { height: 32px; diff --git a/packages/reporter/src/studio/StudioTest.tsx b/packages/reporter/src/studio/StudioTest.tsx index 15099911066..ffac0f372d9 100644 --- a/packages/reporter/src/studio/StudioTest.tsx +++ b/packages/reporter/src/studio/StudioTest.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useMemo, useRef } from 'react' +import React, { useCallback, useEffect, useMemo, useRef } from 'react' import { observer } from 'mobx-react' import { RunnablesStore } from '../runnables/runnables-store' import { Duration } from '../duration/duration' @@ -65,6 +65,8 @@ export const StudioTest = observer(({ appState, runnablesStore, statsStore }: St // Single we're in single test mode, the current test is the first test in the runnablesStore._tests const currentTest = Object.values(runnablesStore._tests)[0] const tooltipRef = useRef(null) + const testSectionRef = useRef(null) + const fixedElementRef = useRef(null) const { containerRef, isMounted, scrollIntoView } = useScrollIntoView({ appState, @@ -89,10 +91,28 @@ export const StudioTest = observer(({ appState, runnablesStore, statsStore }: St const testTitle = currentTest ? {currentTest.title} : null + const toggleHeaderShadow = (entries) => { + const [entry] = entries + + testSectionRef.current?.classList.toggle('shadow-active', !entry.isIntersecting) + } + + useEffect(() => { + if (!fixedElementRef.current) return + + const observer = new IntersectionObserver(toggleHeaderShadow) + + observer.observe(fixedElementRef.current) + + return () => observer.disconnect() + }, []) + return ( - currentTest && ( -
-
+ currentTest && (<> + {/* This empty div acts as an intersection observer target to toggle the header shadow based on scroll position */} +
+
+
All tests

} className='cy-tooltip'> @@ -126,6 +146,7 @@ export const StudioTest = observer(({ appState, runnablesStore, statsStore }: St
+ ) ) }) From 123442b0f32f38357552ac5fdbec50c1e44df3d2 Mon Sep 17 00:00:00 2001 From: Mabel Amaya Date: Tue, 28 Oct 2025 10:35:46 -0400 Subject: [PATCH 2/5] update changelog --- cli/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md index 734f96fa730..47c9a9cbce1 100644 --- a/cli/CHANGELOG.md +++ b/cli/CHANGELOG.md @@ -19,6 +19,7 @@ _Released 10/20/2025 (PENDING)_ - 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). +- Make studio test name header sticky. Addresses [#32591](https://github.com/cypress-io/cypress/issues/32591). Addressed in [#32840](https://github.com/cypress-io/cypress/pull/32840) **Dependency Updates:** From 0f5b4d9f4c8f0203443c2c110a3c2301097feeaf Mon Sep 17 00:00:00 2001 From: Mabel Amaya Date: Tue, 28 Oct 2025 12:30:45 -0400 Subject: [PATCH 3/5] sticky header in all tests view --- .../reporter/src/collapsible/collapsible.scss | 6 +++++ .../reporter/src/collapsible/collapsible.tsx | 24 +++++++++++++++++-- packages/reporter/src/lib/mixins.scss | 18 ++++++++++++++ .../reporter/src/runnables/runnables.scss | 1 - packages/reporter/src/studio/StudioTest.scss | 18 +++----------- 5 files changed, 49 insertions(+), 18 deletions(-) diff --git a/packages/reporter/src/collapsible/collapsible.scss b/packages/reporter/src/collapsible/collapsible.scss index b423ca0835c..4dc22d3329d 100644 --- a/packages/reporter/src/collapsible/collapsible.scss +++ b/packages/reporter/src/collapsible/collapsible.scss @@ -1,3 +1,5 @@ +@import "../lib/mixins.scss"; + .reporter { .collapsible-indicator { margin-right: 8px; @@ -8,4 +10,8 @@ .is-open > .collapsible-header-wrapper > .collapsible-header > .collapsible-header-inner > .collapsible-indicator { transform: rotate(0); } + + .runnable > .is-open > .collapsible-header-wrapper { + @include sticky-header-with-shadow; + } } diff --git a/packages/reporter/src/collapsible/collapsible.tsx b/packages/reporter/src/collapsible/collapsible.tsx index 287a5b768da..fe3a743963f 100644 --- a/packages/reporter/src/collapsible/collapsible.tsx +++ b/packages/reporter/src/collapsible/collapsible.tsx @@ -1,5 +1,5 @@ import cs from 'classnames' -import React, { CSSProperties, MouseEvent, ReactNode, RefObject, useCallback, useState } from 'react' +import React, { CSSProperties, MouseEvent, ReactNode, RefObject, useCallback, useEffect, useRef, useState } from 'react' import { onEnterOrSpace } from '../lib/util' import DocumentBlankIcon from '@packages/frontend-shared/src/assets/icons/document-blank_x16.svg' import { IconChevronDownSmall } from '@cypress-design/react-icon' @@ -24,6 +24,8 @@ interface CollapsibleProps { const Collapsible: React.FC = ({ isOpen: isOpenAsProp = false, header, headerClass = '', headerStyle = {}, headerExtras, contentClass = '', hideExpander = false, containerRef = null, onOpenStateChangeRequested, children, HeaderComponent }) => { const [isOpenState, setIsOpenState] = useState(isOpenAsProp) + const headerRef = useRef(null) + const fixedElementRef = useRef(null) const toggleOpenState = useCallback((e?: MouseEvent) => { e?.stopPropagation() @@ -36,9 +38,27 @@ const Collapsible: React.FC = ({ isOpen: isOpenAsProp = false, const isOpen = onOpenStateChangeRequested ? isOpenAsProp : isOpenState + const toggleHeaderShadow = (entries) => { + const [entry] = entries + + headerRef.current?.classList.toggle('shadow-active', !entry.isIntersecting) + } + + useEffect(() => { + if (!fixedElementRef?.current) return + + const observer = new IntersectionObserver(toggleHeaderShadow) + + observer.observe(fixedElementRef.current) + + return () => observer.disconnect() + }, []) + return (
-
+ {/* This empty div acts as an intersection observer target to toggle the header shadow based on scroll position */} +
+
Date: Tue, 28 Oct 2025 12:32:45 -0400 Subject: [PATCH 4/5] update changelog --- cli/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md index 47c9a9cbce1..52354af04d7 100644 --- a/cli/CHANGELOG.md +++ b/cli/CHANGELOG.md @@ -19,7 +19,7 @@ _Released 10/20/2025 (PENDING)_ - 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). -- Make studio test name header sticky. Addresses [#32591](https://github.com/cypress-io/cypress/issues/32591). Addressed in [#32840](https://github.com/cypress-io/cypress/pull/32840) +- Make test name header sticky in studio mode and in the tests list. Addresses [#32591](https://github.com/cypress-io/cypress/issues/32591). Addressed in [#32840](https://github.com/cypress-io/cypress/pull/32840) **Dependency Updates:** From 9ac8da7671d84ccde2db5428d2f9dd5bd924dd64 Mon Sep 17 00:00:00 2001 From: Mabel Amaya Date: Thu, 30 Oct 2025 12:22:49 -0400 Subject: [PATCH 5/5] only display shadow for test header --- packages/reporter/src/collapsible/collapsible.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/reporter/src/collapsible/collapsible.scss b/packages/reporter/src/collapsible/collapsible.scss index 4dc22d3329d..e9a11920788 100644 --- a/packages/reporter/src/collapsible/collapsible.scss +++ b/packages/reporter/src/collapsible/collapsible.scss @@ -11,7 +11,7 @@ transform: rotate(0); } - .runnable > .is-open > .collapsible-header-wrapper { + .test > .is-open > .collapsible-header-wrapper { @include sticky-header-with-shadow; } }