fix: avoid overflow issue in Firefox (#22620)

* fix: update positioning of runner

* remove isFirefox check

* Update packages/app/src/runner/useRunnerStyle.ts

Co-authored-by: Zachary Williams <ZachJW34@gmail.com>

Co-authored-by: Zachary Williams <ZachJW34@gmail.com>

packages/app/src/runner/ResizablePanels.vue

@@ -4,7 +4,6 @@
     class="flex"
     :class="{
       'select-none': panel1IsDragging || panel2IsDragging,
-      'overflow-x-hidden': isFirefox
     }"
     @mouseup="handleMouseup"
     @mousemove="handleMousemove"
@@ -208,7 +207,4 @@ watchEffect(() => {
   }
 })
 
-// TODO: UNIFY-1704 - avoid special case for FF
-const isFirefox = window.__CYPRESS_BROWSER__?.family === 'firefox'
-
 </script>

packages/app/src/runner/useRunnerStyle.ts

@@ -62,10 +62,15 @@ export const useRunnerStyle = () => {
   })
 
   const viewportStyle = computed(() => {
+    // in the below styles, `position: absolute` is required to avoid certain edge cases
+    // that can happen with overflow (mainly, in Firefox, but not always)
+    // 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;
     transform: scale(${scale.value});
+    position: absolute;
     `
 
     // to keep the AUT iframe centered during scaling, we need to calculate the difference between