chore: Update styles in runner to not be fractional + only update scrollbar style if value has changed (#32437)

* chore: set debug verbose on stderr-filtering logs

* fix: spike into resize observer fix

* only commit resizeobserver protection

* prevent fractional numbers in iframe styles

* some other changes

* undo irrelevant changes

* undo verbose

* remove console

Author: jennifer-shehane

packages/app/cypress/e2e/cypress-in-cypress-e2e.cy.ts

@@ -37,7 +37,27 @@ describe('Cypress In Cypress E2E', { viewportWidth: 1500, defaultCommandTimeout:
     cy.get('.hook-open-in-ide').should('exist')
 
     cy.get('#unified-runner').then((el) => {
-      expect(el[0].getAttribute('style')).to.match(/width: 1000px; height: 660px; transform: scale\(0.854\d+\); position: absolute; margin-left: -25px;/)
+      expect(el[0].getAttribute('style')).to.match(/width: 1000px; height: 660px; transform: scale\(0.85\); position: absolute; margin-left: -25px;/)
+      expect(el[0].getBoundingClientRect().width).to.equal(1000 * 0.85)
+      expect(el[0].getBoundingClientRect().height).to.equal(660 * 0.85)
+      expect(parseInt(el[0].style.marginLeft)).to.equal(-25)
+    })
+  })
+
+  it('demonstrates fractional dimension calculations before rounding fixes', () => {
+    cy.viewport(1333, 777)
+    cy.visitApp()
+    cy.specsPageIsVisible()
+    cy.contains('dom-content.spec').click()
+    cy.waitForSpecToFinish()
+
+    cy.get('[data-model-state="passed"]').should('contain', 'renders the test content')
+    cy.findByTestId('aut-url').should('be.visible')
+
+    cy.get('#unified-runner').then((el) => {
+      const style = el[0].getAttribute('style')
+
+      expect(style).to.match(/width: 1000px; height: 660px; transform: scale\(0\.78\); position: absolute; margin-left: -108px;/)
     })
   })
 

packages/app/src/runner/useRunnerStyle.ts

@@ -72,7 +72,8 @@ export const useRunnerStyle = () => {
       scale = Math.min(containerWidth.value / autStore.viewportDimensions.width, containerHeight.value / autStore.viewportDimensions.height, 1)
     }
 
-    return scale
+    // Round scale to prevent fractional dimensions
+    return Math.round(scale * 100) / 100 // Round to 2 decimal places for clean fractions
   })
 
   const viewportStyle = computed(() => {
@@ -81,8 +82,8 @@ export const useRunnerStyle = () => {
     // see this issue for details: https://github.com/cypress-io/cypress/issues/21881
 
     let style = `
-    width: ${autStore.viewportDimensions.width}px;
-    height: ${autStore.viewportDimensions.height}px;
+    width: ${Math.round(autStore.viewportDimensions.width)}px;
+    height: ${Math.round(autStore.viewportDimensions.height)}px;
     transform: scale(${scale.value});
     position: absolute;
     `
@@ -91,7 +92,7 @@ export const useRunnerStyle = () => {
     // viewport with midpoint and the the container width midpoint and apply a negative margin
     if (!screenshotStore.isScreenshotting) {
       style += `
-      margin-left: ${(containerWidth.value / 2) - (autStore.viewportDimensions.width / 2) }px`
+      margin-left: ${Math.round((containerWidth.value / 2) - (Math.round(autStore.viewportDimensions.width) / 2)) }px`
     }
 
     return style

packages/app/src/specs/SpecsList.vue

@@ -408,7 +408,10 @@ useResizeObserver(containerProps.ref, (entries) => {
   if (containerElement) {
     const displayedScrollbarWidth = containerElement.offsetWidth - containerElement.clientWidth
 
-    scrollbarOffset.value = displayedScrollbarWidth
+    // Only update if the value actually changed to prevent unnecessary updates
+    if (scrollbarOffset.value !== displayedScrollbarWidth) {
+      scrollbarOffset.value = displayedScrollbarWidth
+    }
   } else {
     scrollbarOffset.value = 0
   }