misc: fix studio panel resizing when dragging (#32584)

Author: mschile

cli/CHANGELOG.md

@@ -7,6 +7,10 @@ _Released 10/07/2025 (PENDING)_
 
 - Fixed a regression introduced in [`15.0.0`](https://docs.cypress.io/guides/references/changelog#15-0-0) where `dbus` connection error messages appear in docker containers when launching Cypress. Fixes [#32290](https://github.com/cypress-io/cypress/issues/32290).
 
+**Misc:**
+
+- Fixed the Studio panel resizing when dragging. Addressed in [#32584](https://github.com/cypress-io/cypress/pull/32584).
+
 ## 15.3.0
 
 _Released 9/23/2025_

packages/app/src/runner/ResizablePanels.cy.tsx

@@ -30,7 +30,7 @@ const slotContents = {
   panel4: () => <div class="h-full bg-yellow-100">panel4</div>,
 }
 
-describe('<ResizablePanels />', { viewportWidth: 1500, defaultCommandTimeout: 4000 }, () => {
+describe('<ResizablePanels />', { viewportWidth: 1500 }, () => {
   describe('the panels resize as expected', () => {
     beforeEach(() => {
       cy.mount(() => (
@@ -110,7 +110,7 @@ describe('<ResizablePanels />', { viewportWidth: 1500, defaultCommandTimeout: 40
     })
   })
 
-  describe('when panel 4 is shown', () => {
+  describe('when panel 4 is shown', { viewportWidth: 2000 }, () => {
     beforeEach(() => {
       cy.mount(() => (
         <div class="flex">
@@ -209,6 +209,7 @@ describe('<ResizablePanels />', { viewportWidth: 1500, defaultCommandTimeout: 40
       dragHandleToClientX('panel4', 1400)
       assertWidth('panel4', 600)
       dragHandleToClientX('panel4', 1660)
+      assertWidth('panel4', minPanel4Width)
       dragHandleToClientX('panel4', 1800)
       assertWidth('panel4', minPanel4Width)
       dragHandleToClientX('panel4', 1900)

packages/app/src/runner/ResizablePanels.vue

@@ -65,7 +65,7 @@
 
       <div
         data-cy="panel4ResizeHandle"
-        class="cursor-ew-resize h-full top-0 left-[-6px] w-[10px] z-30 absolute"
+        class="cursor-ew-resize h-full top-0 left-[-5px] w-[10px] z-30 absolute"
         @mousedown="handleMousedown('panel4', $event)"
       />
     </div>
@@ -118,13 +118,14 @@ const emit = defineEmits<{
 
 const panel1HandleX = ref(props.initialPanel1Width)
 const panel2HandleX = ref(props.initialPanel2Width + props.initialPanel1Width)
-const panel4HandleX = ref(props.initialPanel2Width + props.initialPanel1Width + props.initialPanel4Width)
 const panel1IsDragging = ref(false)
 const panel2IsDragging = ref(false)
 const panel4IsDragging = ref(false)
 const cachedPanel1Width = ref<number>(props.initialPanel1Width) // because panel 1 (the inline specs list) can be opened and closed in the UI, we cache the width
 const cachedPanel4Width = ref(props.initialPanel4Width)
 const panel2Width = ref(props.initialPanel2Width)
+const panel4InitialMouseX = ref(0) // Initial mouse position when panel4 drag starts
+const panel4InitialWidth = ref(0) // Initial panel width when panel4 drag starts
 
 const handleMousedown = (panel: DraggablePanel, event: MouseEvent) => {
   if (panel === 'panel1') {
@@ -134,9 +135,11 @@ const handleMousedown = (panel: DraggablePanel, event: MouseEvent) => {
     panel2HandleX.value = event.clientX
   } else if (panel === 'panel4') {
     panel4IsDragging.value = true
-    panel4HandleX.value = event.clientX
+    panel4InitialMouseX.value = event.clientX
+    panel4InitialWidth.value = cachedPanel4Width.value
   }
 }
+
 const handleMousemove = (event: MouseEvent) => {
   if (!panel1IsDragging.value && !panel2IsDragging.value && !panel4IsDragging.value) {
     // nothing is dragging, ignore mousemove
@@ -153,13 +156,11 @@ const handleMousemove = (event: MouseEvent) => {
     panel2Width.value = event.clientX - props.offsetLeft - panel1Width.value
     emit('panelWidthUpdated', { panel: 'panel2', width: panel2Width.value })
   } else if (panel4IsDragging.value && isNewWidthAllowed(event.clientX, 'panel4')) {
-    panel4HandleX.value = event.clientX
-    // Calculate width from the right edge of the window
-    // so that when we drag the panel to the left, it grows
-    // and when we drag it to the right, it shrinks
-    const rightEdge = props.maxTotalWidth + props.offsetLeft
+    // panel4 resizes from the right edge, so we calculate based on mouse movement from the initial position
+    const mouseDelta = event.clientX - panel4InitialMouseX.value
+    const newWidth = panel4InitialWidth.value - mouseDelta
 
-    cachedPanel4Width.value = rightEdge - event.clientX
+    cachedPanel4Width.value = newWidth
     emit('panelWidthUpdated', { panel: 'panel4', width: panel4Width.value })
   }
 }
@@ -258,8 +259,8 @@ function isNewWidthAllowed (mouseClientX: number, panel: DraggablePanel) {
   }
 
   if (panel === 'panel4') {
-    const rightEdge = props.maxTotalWidth + props.offsetLeft
-    const newWidth = rightEdge - mouseClientX
+    const mouseDelta = mouseClientX - panel4InitialMouseX.value
+    const newWidth = panel4InitialWidth.value - mouseDelta
 
     if (isMaxWidthSmall && newWidth >= props.minPanel4Width) {
       return true
@@ -270,6 +271,7 @@ function isNewWidthAllowed (mouseClientX: number, panel: DraggablePanel) {
 
   return false
 }
+
 watchEffect(() => {
   if (!props.showPanel1) {
     emit('panelWidthUpdated', { panel: 'panel1', width: 0 })