diff --git a/packages/app/src/runner/aut-iframe.ts b/packages/app/src/runner/aut-iframe.ts
index 5548802fa5c7..2e952be7e363 100644
--- a/packages/app/src/runner/aut-iframe.ts
+++ b/packages/app/src/runner/aut-iframe.ts
@@ -20,6 +20,9 @@ export class AutIframe {
   debouncedToggleSelectorPlayground: DebouncedFunc<(isEnabled: any) => void>
   $iframe?: JQuery<HTMLIFrameElement>
   _highlightedEl?: Element
+  // Cache the blank page content to avoid repeated generation
+  private _cachedTestIsolationContent?: string
+  private _cachedInitialContent?: string
 
   constructor (
     private projectName: string,
@@ -50,11 +53,21 @@ export class AutIframe {
   }
 
   _showInitialBlankPage () {
-    this._showContents(blankContents.initial())
+    // Cache the content to avoid repeated HTML generation
+    if (!this._cachedInitialContent) {
+      this._cachedInitialContent = blankContents.initial()
+    }
+
+    this._showContents(this._cachedInitialContent)
   }
 
   _showTestIsolationBlankPage () {
-    this._showContents(blankContents.testIsolationBlankPage())
+    // Cache the content to avoid repeated HTML generation
+    if (!this._cachedTestIsolationContent) {
+      this._cachedTestIsolationContent = blankContents.testIsolationBlankPage()
+    }
+
+    this._showContents(this._cachedTestIsolationContent)
   }
 
   showVisitFailure = (props) => {
diff --git a/packages/app/src/runner/utils.ts b/packages/app/src/runner/utils.ts
index d77df970fe76..86a720ef6111 100644
--- a/packages/app/src/runner/utils.ts
+++ b/packages/app/src/runner/utils.ts
@@ -20,11 +20,7 @@ export function getReporterElement () {
 }
 
 export function empty (el: HTMLElement) {
-  while (el.lastChild) {
-    if (el && el.firstChild) {
-      el.removeChild(el.firstChild)
-    }
-  }
+  el.innerHTML = ''
 }
 
 export const togglePlayground = (autIframe: AutIframe) => {
diff --git a/packages/app/src/settings/SettingsContainer.vue b/packages/app/src/settings/SettingsContainer.vue
index db6d98cde1ac..03cd3a07c2c5 100644
--- a/packages/app/src/settings/SettingsContainer.vue
+++ b/packages/app/src/settings/SettingsContainer.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="space-y-[32px] h-[calc(100vh-[64px])] p-[32px] overflow-auto"
+    class="space-y-[32px] h-[calc(100vh-64px)] p-[32px] overflow-auto"
     data-cy="settings"
   >
     <div class="space-y-[24px]">
diff --git a/packages/driver/cypress/e2e/commands/storage.cy.ts b/packages/driver/cypress/e2e/commands/storage.cy.ts
index aaef32af29fd..c4f286810668 100644
--- a/packages/driver/cypress/e2e/commands/storage.cy.ts
+++ b/packages/driver/cypress/e2e/commands/storage.cy.ts
@@ -322,6 +322,10 @@ describe('src/cy/commands/storage', () => {
   })
 
   context('#clearLocalStorage', () => {
+    beforeEach(() => {
+      cy.visit('/fixtures/set-storage-on-multiple-origins.html')
+    })
+
     it('passes keys onto Cypress.LocalStorage.clear', () => {
       const clear = cy.spy(Cypress.LocalStorage, 'clear')
 
@@ -406,6 +410,18 @@ describe('src/cy/commands/storage', () => {
           expect(lastLog.get('snapshots')[0]).to.be.an('object')
         })
       })
+
+      it('consoleProps includes the empty storage yielded', () => {
+        const ls = cy.state('window').localStorage
+
+        cy.clearLocalStorage().then(() => {
+          const consoleProps = logs[1].get('consoleProps')()
+
+          expect(consoleProps.name).to.equal('clearLocalStorage')
+          expect(consoleProps.type).to.equal('command')
+          expect(consoleProps.props.Yielded).to.deep.equal(ls)
+        })
+      })
     })
 
     describe('without log', () => {
diff --git a/packages/driver/cypress/e2e/e2e/origin/commands/storage.cy.ts b/packages/driver/cypress/e2e/e2e/origin/commands/storage.cy.ts
index 91ad78e43b6d..6c504f2dcf4c 100644
--- a/packages/driver/cypress/e2e/e2e/origin/commands/storage.cy.ts
+++ b/packages/driver/cypress/e2e/e2e/origin/commands/storage.cy.ts
@@ -114,7 +114,7 @@ context('cy.origin storage', { browser: '!webkit' }, () => {
 
         expect(consoleProps.name).to.equal('clearLocalStorage')
         expect(consoleProps.type).to.equal('command')
-        expect(consoleProps.props.Yielded).to.be.null
+        expect(consoleProps.props.Yielded).to.deep.equal({})
       })
     })
   })
diff --git a/packages/driver/src/cypress.ts b/packages/driver/src/cypress.ts
index e8086ad1ffc4..b6d88dd68eef 100644
--- a/packages/driver/src/cypress.ts
+++ b/packages/driver/src/cypress.ts
@@ -409,11 +409,23 @@ class $Cypress {
     this.emit('cypress:in:cypress:runner:event', ...args)
   }
 
+  private _handleMochaEvent (eventType: string, args: unknown[], isTextTerminal: boolean) {
+    this.maybeEmitCypressInCypress('mocha', eventType, ...args)
+
+    if (isTextTerminal) {
+      return this.emit('mocha', eventType, ...args)
+    }
+  }
+
   action (eventName, ...args) {
     // normalizes all the various ways
     // other objects communicate intent
     // and 'action' to Cypress
     debug(eventName)
+
+    const isTextTerminal = this.config('isTextTerminal')
+    const isInteractive = this.config('isInteractive')
+
     switch (eventName) {
       case 'recorder:frame':
         return this.emit('recorder:frame', args[0])
@@ -434,13 +446,7 @@ class $Cypress {
           return
         }
 
-        this.maybeEmitCypressInCypress('mocha', 'start', args[0])
-
-        if (this.config('isTextTerminal')) {
-          return this.emit('mocha', 'start', args[0])
-        }
-
-        break
+        return this._handleMochaEvent('start', args, isTextTerminal)
 
       case 'runner:end':
         $sourceMapUtils.destroySourceMapConsumers()
@@ -451,102 +457,43 @@ class $Cypress {
         // TODO: it would be nice to await this emit before preceding.
         this.emit('run:end')
 
-        this.maybeEmitCypressInCypress('mocha', 'end', args[0])
-
-        if (this.config('isTextTerminal')) {
-          return this.emit('mocha', 'end', args[0])
-        }
-
-        break
+        return this._handleMochaEvent('end', args, isTextTerminal)
 
       case 'runner:suite:start':
         // mocha runner started processing a suite
-        this.maybeEmitCypressInCypress('mocha', 'suite', ...args)
-
-        if (this.config('isTextTerminal')) {
-          return this.emit('mocha', 'suite', ...args)
-        }
+        return this._handleMochaEvent('suite', args, isTextTerminal)
 
-        break
       case 'runner:suite:end':
         // mocha runner finished processing a suite
-        this.maybeEmitCypressInCypress('mocha', 'suite end', ...args)
-
-        if (this.config('isTextTerminal')) {
-          return this.emit('mocha', 'suite end', ...args)
-        }
+        return this._handleMochaEvent('suite end', args, isTextTerminal)
 
-        break
       case 'runner:hook:start':
         // mocha runner started processing a hook
-
-        this.maybeEmitCypressInCypress('mocha', 'hook', ...args)
-
-        if (this.config('isTextTerminal')) {
-          return this.emit('mocha', 'hook', ...args)
-        }
-
-        break
+        return this._handleMochaEvent('hook', args, isTextTerminal)
 
       case 'runner:hook:end':
         // mocha runner finished processing a hook
-        this.maybeEmitCypressInCypress('mocha', 'hook end', ...args)
-
-        if (this.config('isTextTerminal')) {
-          return this.emit('mocha', 'hook end', ...args)
-        }
-
-        break
+        return this._handleMochaEvent('hook end', args, isTextTerminal)
 
       case 'runner:test:start':
         // mocha runner started processing a hook
-        this.maybeEmitCypressInCypress('mocha', 'test', ...args)
-
-        if (this.config('isTextTerminal')) {
-          return this.emit('mocha', 'test', ...args)
-        }
-
-        break
+        return this._handleMochaEvent('test', args, isTextTerminal)
 
       case 'runner:test:end':
-        this.maybeEmitCypressInCypress('mocha', 'test end', ...args)
-
-        if (this.config('isTextTerminal')) {
-          return this.emit('mocha', 'test end', ...args)
-        }
-
-        break
+        return this._handleMochaEvent('test end', args, isTextTerminal)
 
       case 'runner:pass':
         // mocha runner calculated a pass
         // this is delayed from when mocha would normally fire it
         // since we fire it after all afterEach hooks have ran
-        this.maybeEmitCypressInCypress('mocha', 'pass', ...args)
-
-        if (this.config('isTextTerminal')) {
-          return this.emit('mocha', 'pass', ...args)
-        }
-
-        break
+        return this._handleMochaEvent('pass', args, isTextTerminal)
 
       case 'runner:pending':
         // mocha runner calculated a pending test
-        this.maybeEmitCypressInCypress('mocha', 'pending', ...args)
-
-        if (this.config('isTextTerminal')) {
-          return this.emit('mocha', 'pending', ...args)
-        }
-
-        break
+        return this._handleMochaEvent('pending', args, isTextTerminal)
 
       case 'runner:fail': {
-        this.maybeEmitCypressInCypress('mocha', 'fail', ...args)
-
-        if (this.config('isTextTerminal')) {
-          return this.emit('mocha', 'fail', ...args)
-        }
-
-        break
+        return this._handleMochaEvent('fail', args, isTextTerminal)
       }
       // retry event only fired in mocha version 6+
       // https://github.com/mochajs/mocha/commit/2a76dd7589e4a1ed14dd2a33ab89f182e4c4a050
@@ -554,7 +501,7 @@ class $Cypress {
         // mocha runner calculated a pass
         this.maybeEmitCypressInCypress('mocha', 'retry', ...args)
 
-        if (this.config('isTextTerminal')) {
+        if (isTextTerminal) {
           this.emit('mocha', 'retry', ...args)
         }
 
@@ -567,7 +514,7 @@ class $Cypress {
       case 'runner:test:before:run':
         this.maybeEmitCypressInCypress('mocha', 'test:before:run', args[0])
 
-        if (this.config('isTextTerminal')) {
+        if (isTextTerminal) {
           // needed for handling test retries
           this.emit('mocha', 'test:before:run', args[0])
         }
@@ -602,7 +549,7 @@ class $Cypress {
         this.emit('test:after:run', ...args)
         this.maybeEmitCypressInCypress('mocha', 'test:after:run', args[0])
 
-        if (this.config('isTextTerminal')) {
+        if (isTextTerminal) {
           // needed for calculating wallClockDuration
           // and the timings of after + afterEach hooks
           return this.emit('mocha', 'test:after:run', args[0])
@@ -628,7 +575,7 @@ class $Cypress {
           return // do not emit hidden logs to public apis
         }
 
-        this.runner?.addLog(args[0], this.config('isInteractive'))
+        this.runner?.addLog(args[0], isInteractive)
 
         return this.emit('log:added', ...args)
 
@@ -641,7 +588,7 @@ class $Cypress {
 
         // Cypress logs will only trigger an update every 4 ms so there is a
         // chance the runner has been torn down when the update is triggered.
-        this.runner?.addLog(args[0], this.config('isInteractive'))
+        this.runner?.addLog(args[0], isInteractive)
 
         return this.emit('log:changed', ...args)
 
diff --git a/packages/driver/src/cypress/runner.ts b/packages/driver/src/cypress/runner.ts
index 1522f55687da..1cd8e9354f45 100644
--- a/packages/driver/src/cypress/runner.ts
+++ b/packages/driver/src/cypress/runner.ts
@@ -117,15 +117,25 @@ const testAfterRun = (test, Cypress) => {
     // perf loop only through
     // a tests OWN properties and not
     // inherited properties from its shared ctx
-    for (let key of Object.keys(test.ctx || {})) {
-      const value = test.ctx[key]
-
-      if (_.isObject(value) && !mochaCtxKeysRe.test(key)) {
-        // nuke any object properties that come from
-        // cy.as() aliases or anything set from 'this'
-        // so we aggressively perform GC and prevent obj
-        // ref's from building up
-        test.ctx[key] = undefined
+    const ctx = test.ctx
+
+    if (ctx) {
+      // Cache the regex test result and use more efficient iteration
+      const keys = Object.keys(ctx)
+      const keysLength = keys.length
+
+      for (let i = 0; i < keysLength; i++) {
+        const key = keys[i]
+        const value = ctx[key]
+
+        // Cache the object check and regex test for better performance
+        if (value && typeof value === 'object' && !mochaCtxKeysRe.test(key)) {
+          // nuke any object properties that come from
+          // cy.as() aliases or anything set from 'this'
+          // so we aggressively perform GC and prevent obj
+          // ref's from building up
+          ctx[key] = undefined
+        }
       }
     }
 
@@ -776,11 +786,17 @@ const normalize = (runnable, tests, initialTests, getRunnableId, getHookId, getO
   }
 
   const onlyIdMode = () => {
-    return !!getOnlyTestId() || !!getOnlySuiteId()
+    const onlyTestId = getOnlyTestId()
+    const onlySuiteId = getOnlySuiteId()
+
+    return !!onlyTestId || !!onlySuiteId
   }
 
   const suiteHasOnlyId = (suite) => {
-    return suiteHasTest(suite, getOnlyTestId()) || suiteHasSuite(suite, getOnlySuiteId())
+    const onlyTestId = getOnlyTestId()
+    const onlySuiteId = getOnlySuiteId()
+
+    return suiteHasTest(suite, onlyTestId) || suiteHasSuite(suite, onlySuiteId)
   }
 
   const normalizedRunnable = normalizeRunnable(runnable)
@@ -809,11 +825,14 @@ const normalize = (runnable, tests, initialTests, getRunnableId, getHookId, getO
     // recursively iterate and normalize all other _runnables
     _.each({ tests: runnableTests, suites: runnableSuites }, (_runnables, type) => {
       if (runnable[type]) {
+        const isOnlyIdMode = onlyIdMode()
+        const onlyTestId = isOnlyIdMode ? getOnlyTestId() : null
+
         return normalizedRunnable[type] = _.compact(_.map(_runnables, (childRunnable) => {
           const normalizedChild = normalize(childRunnable, tests, initialTests, getRunnableId, getHookId, getOnlyTestId, getOnlySuiteId, createEmptyOnlyTest)
 
-          if (type === 'tests' && onlyIdMode()) {
-            if (normalizedChild.id === getOnlyTestId()) {
+          if (type === 'tests' && isOnlyIdMode) {
+            if (normalizedChild.id === onlyTestId) {
               runnable.tests = [childRunnable]
               runnable._onlyTests = [childRunnable]
 
@@ -823,8 +842,10 @@ const normalize = (runnable, tests, initialTests, getRunnableId, getHookId, getO
             return null
           }
 
-          if (type === 'suites' && onlyIdMode()) {
-            if (suiteHasOnlyId(childRunnable)) {
+          if (type === 'suites' && isOnlyIdMode) {
+            const hasOnlyId = suiteHasOnlyId(childRunnable)
+
+            if (hasOnlyId) {
               runnable.suites = [childRunnable]
               runnable._onlySuites = [childRunnable]
 
@@ -849,8 +870,10 @@ const normalize = (runnable, tests, initialTests, getRunnableId, getHookId, getO
   const filterOnly = (normalizedSuite, suite) => {
     if (suite._onlyTests.length) {
       const suiteOnlyTests = suite._onlyTests
+      const onlyTestId = getOnlyTestId()
+      const hasOnlyTestId = !!onlyTestId
 
-      if (getOnlyTestId()) {
+      if (hasOnlyTestId) {
         suite.tests = []
         suite._onlyTests = []
         suite._afterAll = []
@@ -862,8 +885,8 @@ const normalize = (runnable, tests, initialTests, getRunnableId, getHookId, getO
       normalizedSuite.tests = _.compact(_.map(suiteOnlyTests, (test) => {
         const normalizedTest = normalizeRunnable(test)
 
-        if (getOnlyTestId()) {
-          if (normalizedTest.id === getOnlyTestId()) {
+        if (hasOnlyTestId) {
+          if (normalizedTest.id === onlyTestId) {
             suite.tests = [test]
             suite._onlyTests = [test]
 
@@ -898,12 +921,16 @@ const normalize = (runnable, tests, initialTests, getRunnableId, getHookId, getO
 
       suite.suites = []
 
+      const isOnlyIdMode = onlyIdMode()
+
       normalizedSuite.suites = _.compact(_.map(suiteSuites, (childSuite) => {
         const normalizedChildSuite = normalize(childSuite, tests, initialTests, getRunnableId, getHookId, getOnlyTestId, getOnlySuiteId, createEmptyOnlyTest)
 
         if ((suite._onlySuites.indexOf(childSuite) !== -1) || filterOnly(normalizedChildSuite, childSuite)) {
-          if (onlyIdMode()) {
-            if (suiteHasOnlyId(childSuite)) {
+          if (isOnlyIdMode) {
+            const hasOnlyId = suiteHasOnlyId(childSuite)
+
+            if (hasOnlyId) {
               suite.suites.push(childSuite)
 
               return normalizedChildSuite
diff --git a/packages/driver/src/util/serialization/index.ts b/packages/driver/src/util/serialization/index.ts
index 16a2a6cface0..88addd69318b 100644
--- a/packages/driver/src/util/serialization/index.ts
+++ b/packages/driver/src/util/serialization/index.ts
@@ -10,12 +10,21 @@ export const UNSERIALIZABLE = '__cypress_unserializable_value'
 // @ts-ignore
 const structuredCloneRef = window?.structuredClone || structuredClonePonyfill
 
+const isFirefox = () => {
+  // @ts-ignore
+  return Cypress.isBrowser('firefox')
+}
+
+const isNativeStructuredClone = () => {
+  return structuredCloneRef === window?.structuredClone
+}
+
 export const isSerializableInCurrentBrowser = (value: any) => {
   try {
     structuredCloneRef(value)
 
     // @ts-ignore
-    if (Cypress.isBrowser('firefox') && _.isError(value) && structuredCloneRef !== window?.structuredClone) {
+    if (isFirefox() && _.isError(value) && !isNativeStructuredClone()) {
       /**
        * NOTE: structuredClone() was introduced in Firefox 94. Supported versions below 94 need to use the ponyfill
        * to determine whether or not a value can be serialized through postMessage. Since the ponyfill deems Errors
@@ -51,8 +60,11 @@ const convertObjectToSerializableLiteral = (obj): typeof obj => {
 
   do {
     const props = Object.getOwnPropertyNames(currentObjectRef)
+    const propsLength = props.length
+
+    for (let i = 0; i < propsLength; i++) {
+      const prop = props[i]
 
-    props.forEach((prop: string) => {
       try {
         if (!allProps.includes(prop) && isSerializableInCurrentBrowser(currentObjectRef[prop])) {
           allProps.push(prop)
@@ -69,16 +81,19 @@ const convertObjectToSerializableLiteral = (obj): typeof obj => {
           throw err
         }
       }
-    })
+    }
 
     currentObjectRef = Object.getPrototypeOf(currentObjectRef)
   } while (currentObjectRef && currentObjectRef !== Object.prototype && currentObjectRef !== Date.prototype)
 
   const objectAsLiteral = {}
+  const allPropsLength = allProps.length
+
+  for (let i = 0; i < allPropsLength; i++) {
+    const key = allProps[i]
 
-  allProps.forEach((key) => {
     objectAsLiteral[key] = obj[key]
-  })
+  }
 
   return objectAsLiteral
 }
@@ -110,9 +125,14 @@ export const preprocessForSerialization = <T>(valueToSanitize: { [key: string]:
       const sanitizedValueAsLiteral = convertObjectToSerializableLiteral(valueToSanitize) as T
 
       // convert any nested structures as well, if objects or arrays, to literals. This is needed in the case of Proxy objects
-      _.forEach(sanitizedValueAsLiteral as any, (value, key) => {
-        sanitizedValueAsLiteral[key] = preprocessForSerialization(value)
-      })
+      const keys = Object.keys(sanitizedValueAsLiteral as any)
+      const keysLength = keys.length
+
+      for (let i = 0; i < keysLength; i++) {
+        const key = keys[i]
+
+        sanitizedValueAsLiteral[key] = preprocessForSerialization(sanitizedValueAsLiteral[key])
+      }
 
       return sanitizedValueAsLiteral
     } catch (err) {
diff --git a/packages/frontend-shared/src/styles/shared.scss b/packages/frontend-shared/src/styles/shared.scss
index c60c88b0946b..2b214adf38ee 100644
--- a/packages/frontend-shared/src/styles/shared.scss
+++ b/packages/frontend-shared/src/styles/shared.scss
@@ -51,13 +51,4 @@ body {
 // Light scrollbars, anything with light:
 .force-light {
   color-scheme: light;
-}
-
-/**
- * Common theming
- * -------------------------
- */
-
-::selection {
-  @apply bg-gray-200 bg-opacity-30;
 }
\ No newline at end of file
diff --git a/packages/reporter/src/commands/command.tsx b/packages/reporter/src/commands/command.tsx
index 819102f60fce..b3a92e968538 100644
--- a/packages/reporter/src/commands/command.tsx
+++ b/packages/reporter/src/commands/command.tsx
@@ -423,6 +423,7 @@ const Command: React.FC<CommandProps> = observer(({ model, aliasesWithDuplicates
   }
 
   const commandName = model.name ? nameClassName(model.name) : ''
+
   const groupPlaceholder: Array<JSX.Element> = []
 
   let groupLevel = 0
diff --git a/packages/reporter/src/commands/commands.scss b/packages/reporter/src/commands/commands.scss
index 697267e79450..e27db9abb148 100644
--- a/packages/reporter/src/commands/commands.scss
+++ b/packages/reporter/src/commands/commands.scss
@@ -450,15 +450,6 @@
     label {
       font-size: 85%;
     }
-
-    > * {
-      display: inline-block;
-      margin-left: 2px;
-    }
-
-    > *:first-child {
-      margin-left: 0;
-    }
   }
 
   .command-error {
diff --git a/packages/reporter/src/lib/scroller.ts b/packages/reporter/src/lib/scroller.ts
index 9c858b7cfe33..080b5388a048 100644
--- a/packages/reporter/src/lib/scroller.ts
+++ b/packages/reporter/src/lib/scroller.ts
@@ -23,12 +23,17 @@ export class Scroller {
   private _userScrollCount = 0
   private _countUserScrollsTimeout?: number
   private _userScrollThresholdMs = SCROLL_THRESHOLD_MS
+  private _intersectionObserver: IntersectionObserver | null = null
+  private _mutationObserver: MutationObserver | null = null
+  private _elementVisibilityMap = new WeakMap<HTMLElement, boolean>()
 
   setContainer (container: Element, onUserScroll?: UserScrollCallback) {
     this._container = container
 
     this._userScrollCount = 0
 
+    this._setupIntersectionObserver()
+    this._setupMutationObserver()
     this._listenToScrolls(onUserScroll)
   }
 
@@ -66,15 +71,97 @@ export class Scroller {
     })
   }
 
+  private _setupIntersectionObserver () {
+    if (!this._container || !(this._container instanceof Element)) return
+
+    // Clean up existing observer
+    if (this._intersectionObserver) {
+      this._intersectionObserver.disconnect()
+    }
+
+    this._intersectionObserver = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          const element = entry.target as HTMLElement
+          // Consider fully visible if intersection ratio is 1.0 (completely visible)
+          // with some tolerance for the padding
+          const isFullyVisible = entry.isIntersecting && entry.intersectionRatio >= 0.95
+
+          this._elementVisibilityMap.set(element, isFullyVisible)
+        })
+      },
+      {
+        root: this._container as Element,
+        threshold: [0, 0.95, 1.0], // Track when element becomes 95% visible
+        rootMargin: `-${PADDING}px 0px 0px 0px`, // Account for padding
+      },
+    )
+  }
+
+  private _setupMutationObserver () {
+    if (!this._container || !(this._container instanceof Element)) return
+
+    // Clean up existing observer
+    if (this._mutationObserver) {
+      this._mutationObserver.disconnect()
+    }
+
+    this._mutationObserver = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        // Watch for added nodes
+        mutation.addedNodes.forEach((node) => {
+          if (node.nodeType === Node.ELEMENT_NODE) {
+            const element = node as HTMLElement
+
+            // Observe the new element with intersection observer
+            if (this._intersectionObserver) {
+              this._intersectionObserver.observe(element)
+            }
+
+            // Also observe any child elements that might be scroll targets
+            const childElements = element.querySelectorAll('*')
+
+            childElements.forEach((child) => {
+              if (this._intersectionObserver) {
+                this._intersectionObserver.observe(child as HTMLElement)
+              }
+            })
+          }
+        })
+      })
+    })
+
+    // Start observing the container for DOM changes
+    this._mutationObserver.observe(this._container, {
+      childList: true,
+      subtree: true,
+    })
+  }
+
   scrollIntoView (element: HTMLElement) {
     if (!this._container) {
       throw new Error('A container must be set on the scroller with `scroller.setContainer(container)` before trying to scroll an element into view')
     }
 
-    if (this._isFullyVisible(element)) {
+    // Start observing the element if not already observed
+    if (this._intersectionObserver && !this._elementVisibilityMap.has(element)) {
+      this._intersectionObserver.observe(element)
+    }
+
+    // Check if element is already fully visible using cached intersection data
+    if (this._elementVisibilityMap.get(element)) {
       return
     }
 
+    // Fallback to manual calculation if intersection observer data not available
+    // This happens when the element hasn't been observed yet or the observer isn't ready
+    if (!this._elementVisibilityMap.has(element)) {
+      // this check is less performant than the intersection observer
+      if (this._isFullyVisible(element)) {
+        return
+      }
+    }
+
     // aim to scroll just into view, so that the bottom of the element
     // is just above the bottom of the container
     let scrollTopGoal = this._aboveBottom(element)
@@ -91,8 +178,13 @@ export class Scroller {
   _isFullyVisible (element: HTMLElement) {
     if (!this._container) return false
 
-    return element.offsetTop - this._container.scrollTop > 0
-           && this._container.scrollTop > this._aboveBottom(element)
+    const elementOffsetTop = element.offsetTop
+    const elementClientHeight = element.clientHeight
+    const containerScrollTop = this._container.scrollTop
+    const containerClientHeight = this._container.clientHeight
+
+    return elementOffsetTop - containerScrollTop > 0
+      && containerScrollTop > elementOffsetTop + elementClientHeight - containerClientHeight + PADDING
   }
 
   _aboveBottom (element: HTMLElement) {
@@ -128,6 +220,19 @@ export class Scroller {
     clearTimeout(this._countUserScrollsTimeout)
     this._countUserScrollsTimeout = undefined
     this._userScrollThresholdMs = SCROLL_THRESHOLD_MS
+
+    // Clean up observers
+    if (this._intersectionObserver) {
+      this._intersectionObserver.disconnect()
+      this._intersectionObserver = null
+    }
+
+    if (this._mutationObserver) {
+      this._mutationObserver.disconnect()
+      this._mutationObserver = null
+    }
+
+    this._elementVisibilityMap = new WeakMap()
   }
 
   __setScrollThresholdMs (ms: number) {
diff --git a/packages/reporter/src/main.tsx b/packages/reporter/src/main.tsx
index 4758477bc1a2..45a140b4a403 100644
--- a/packages/reporter/src/main.tsx
+++ b/packages/reporter/src/main.tsx
@@ -2,7 +2,7 @@
 import { action } from 'mobx'
 import { observer } from 'mobx-react'
 import cs from 'classnames'
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useEffect, useRef, useState, useCallback } from 'react'
 import { createRoot } from 'react-dom/client'
 // @ts-ignore
 import EQ from 'css-element-queries/src/ElementQueries'
@@ -57,6 +57,11 @@ const Reporter: React.FC<SingleReporterProps> = observer(({ appState = appStateD
   const [isMounted, setIsMounted] = useState(false)
   const [isInitialized, setIsInitialized] = useState(false)
 
+  // Memoize the renderReporterHeader function to prevent unnecessary re-renders
+  const memoizedRenderReporterHeader = useCallback((props: ReporterHeaderProps) => {
+    return renderReporterHeader(props)
+  }, [renderReporterHeader])
+
   // this registration needs to happen synchronously and not async inside useEffect or else the events will not be registered and the reporter might hang inside cy-in-cy tests
   if (!isInitialized) {
     events.init({
@@ -112,7 +117,7 @@ const Reporter: React.FC<SingleReporterProps> = observer(({ appState = appStateD
       'studio-active': appState.studioActive,
       'mounted': isMounted,
     })}>
-      {renderReporterHeader({ appState, statsStore, runnablesStore, spec: runnerStore.spec })}
+      {memoizedRenderReporterHeader({ appState, statsStore, runnablesStore, spec: runnerStore.spec })}
       {appState?.isPreferencesMenuOpen ? (
         <TestingPreferences appState={appState} />
       ) : (
diff --git a/packages/reporter/src/runnables/runnable-and-suite.tsx b/packages/reporter/src/runnables/runnable-and-suite.tsx
index 1622e97c4fcc..49ad79d65990 100644
--- a/packages/reporter/src/runnables/runnable-and-suite.tsx
+++ b/packages/reporter/src/runnables/runnable-and-suite.tsx
@@ -1,7 +1,7 @@
 import cs from 'classnames'
 import _ from 'lodash'
 import { observer } from 'mobx-react'
-import React, { MouseEvent, useCallback, useMemo } from 'react'
+import React, { MouseEvent, useCallback } from 'react'
 
 import appState, { AppState } from '../lib/app-state'
 import events, { Events } from '../lib/events'
@@ -17,7 +17,22 @@ import { RunnableArray } from './runnables-store'
 
 // should only show connection dots if the current runnable is a test and the next runnable is a test and is not the last runnable
 export const shouldShowConnectionDots = (runnables: RunnableArray, runnable: SuiteModel | TestModel, runnableIndex: number) => {
-  return runnable.type === 'test' && runnableIndex !== runnables.length - 1 && runnables[runnableIndex + 1].type === 'test'
+  // Early return for non-test runnables
+  if (runnable.type !== 'test') {
+    return false
+  }
+
+  const runnablesLength = runnables.length
+
+  // Early return if this is the last runnable
+  if (runnableIndex === runnablesLength - 1) {
+    return false
+  }
+
+  // Check if next runnable is a test
+  const nextRunnable = runnables[runnableIndex + 1]
+
+  return nextRunnable && nextRunnable.type === 'test'
 }
 
 interface SuiteProps {
@@ -91,7 +106,7 @@ const Suite: React.FC<SuiteProps> = observer(({ eventManager = events, model, st
     )
   }, [getHeaderIcon, model.title, studioEnabled, appState.studioActive, _launchStudio])
 
-  const runnablesList = useMemo(() => (
+  const runnablesList = (
     <ul className='runnables'>
       {_.map(model.children, (runnable, index) => {
         return (<Runnable
@@ -103,7 +118,7 @@ const Suite: React.FC<SuiteProps> = observer(({ eventManager = events, model, st
         />)
       })}
     </ul>
-  ), [model.children, studioEnabled, canSaveStudioLogs])
+  )
 
   return (
     // we don't want to show the collapsible if there are no tests in the suite
diff --git a/packages/reporter/src/runnables/runnables.scss b/packages/reporter/src/runnables/runnables.scss
index 348e451d21f3..89304f93e8f3 100644
--- a/packages/reporter/src/runnables/runnables.scss
+++ b/packages/reporter/src/runnables/runnables.scss
@@ -280,7 +280,7 @@ $dotted-line-left-padding: 19px;
         background-color: $gray-1100;
 
         .collapsible-header-text {
-          svg {
+          .collapsible-indicator {
             margin-top: 1px;
           }
         }
@@ -378,20 +378,6 @@ $dotted-line-left-padding: 19px;
           border-radius: 4px;
           box-shadow: 0 0 0 3px #43486159;
           background-color: $reporter-section-background;
-
-          .runnable-wrapper {
-            border-bottom-left-radius: 0;
-
-            .collapsible-header {
-              border: 1px solid $gray-800;
-              border-left: 1px solid transparent;
-              border-radius: 0 4px 0 0;
-            }
-
-            .collapsible-header-inner {
-              background-color: $reporter-section-background;
-            }
-          }
         }
 
         .collapsible-header-inner {
diff --git a/packages/reporter/src/test/test.tsx b/packages/reporter/src/test/test.tsx
index d41b4c1d810c..fae4c1b72d26 100644
--- a/packages/reporter/src/test/test.tsx
+++ b/packages/reporter/src/test/test.tsx
@@ -93,6 +93,7 @@ interface TestProps {
 const Test: React.FC<TestProps> = observer(({ model, events: eventsProps = events, appState: appStateProps = appState, scroller: scrollerProps = scroller, studioEnabled, canSaveStudioLogs }) => {
   const containerRef = useRef(null)
   const [isMounted, setIsMounted] = useState(false)
+  const rafIdRef = useRef<number | null>(null)
 
   useEffect(() => {
     _scrollIntoView()
@@ -110,16 +111,28 @@ const Test: React.FC<TestProps> = observer(({ model, events: eventsProps = event
     eventsProps.emit('studio:init:test', model.id)
   }, [eventsProps, model.id])
 
-  const _scrollIntoView = () => {
-    if (appStateProps.autoScrollingEnabled && (appStateProps.isRunning || appStateProps.studioActive) && model.state !== 'processing') {
-      window.requestAnimationFrame(() => {
-        // since this executes async in a RAF the ref might be null
-        if (containerRef.current) {
-          scrollerProps.scrollIntoView(containerRef.current as HTMLElement)
-        }
-      })
+  const _scrollIntoView = useCallback(() => {
+    // Early return if conditions aren't met
+    if (!appStateProps.autoScrollingEnabled ||
+        (!appStateProps.isRunning && !appStateProps.studioActive) ||
+        model.state === 'processing' ||
+        !containerRef.current) {
+      return
     }
-  }
+
+    // Cancel any pending RAF to prevent multiple calls
+    if (rafIdRef.current) {
+      window.cancelAnimationFrame(rafIdRef.current)
+    }
+
+    rafIdRef.current = window.requestAnimationFrame(() => {
+      rafIdRef.current = null
+      // Double-check ref exists since RAF is async
+      if (containerRef.current) {
+        scrollerProps.scrollIntoView(containerRef.current as HTMLElement)
+      }
+    })
+  }, [appStateProps.autoScrollingEnabled, appStateProps.isRunning, appStateProps.studioActive, model.state, scrollerProps])
 
   const _header = () => {
     return (<>
diff --git a/packages/runner/src/lib/base.scss b/packages/runner/src/lib/base.scss
index 2a5be5138266..30c9027cf1cf 100644
--- a/packages/runner/src/lib/base.scss
+++ b/packages/runner/src/lib/base.scss
@@ -8,10 +8,6 @@ body {
 
 .runner,
 .reporter-wrap footer {
-  * {
-    box-sizing: border-box;
-  }
-
   &,
   input,
   textarea,
diff --git a/patches/prismjs+1.27.0.dev.patch b/patches/prismjs+1.27.0.dev.patch
index 75558656b333..c949f0d0224d 100644
--- a/patches/prismjs+1.27.0.dev.patch
+++ b/patches/prismjs+1.27.0.dev.patch
@@ -1,42 +1,39 @@
 diff --git a/node_modules/prismjs/themes/prism.css b/node_modules/prismjs/themes/prism.css
-index 5b8ed2d..8173ec6 100644
+index 5b8ed2d..37f3e74 100644
 --- a/node_modules/prismjs/themes/prism.css
 +++ b/node_modules/prismjs/themes/prism.css
-@@ -4,8 +4,8 @@
+@@ -4,8 +4,13 @@
   * @author Lea Verou
   */
  
 -code[class*="language-"],
 -pre[class*="language-"] {
++/*
++ * This is a patch to only target the code blocks that are used in the runner.
++ * This reduces the number of selectors that are attempting to be targeted by the runner.
++ * And improves rendering performance.
++ */
 +code.language-js, code.language-ts,
 +pre.language-js, pre.language-ts {
  	color: black;
  	background: none;
  	text-shadow: 0 1px white;
-@@ -28,39 +28,43 @@ pre[class*="language-"] {
+@@ -28,39 +33,27 @@ pre[class*="language-"] {
  	hyphens: none;
  }
  
 -pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
 -code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
-+pre.language-js::-moz-selection, pre.language-js ::-moz-selection,
-+pre.language-ts::-moz-selection, pre.language-ts ::-moz-selection,
-+code.language-js::-moz-selection, code.language-js ::-moz-selection,
-+code.language-ts::-moz-selection, code.language-ts ::-moz-selection {
- 	text-shadow: none;
- 	background: #b3d4fc;
- }
- 
+-	text-shadow: none;
+-	background: #b3d4fc;
+-}
+-
 -pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
 -code[class*="language-"]::selection, code[class*="language-"] ::selection {
-+pre.language-js::selection, pre.language-js ::selection,
-+pre.language-ts::selection, pre.language-ts ::selection,
-+code.language-js::selection, code.language-js ::selection,
-+code.language-ts::selection, code.language-ts ::selection {
- 	text-shadow: none;
- 	background: #b3d4fc;
- }
- 
+-	text-shadow: none;
+-	background: #b3d4fc;
+-}
+-
  @media print {
 -	code[class*="language-"],
 -	pre[class*="language-"] {