fix(files): keep the vertical component of a diagonal wheel pan

Cancelling a wheel event is all-or-nothing, so applying only `scrollLeft`
after `preventDefault` dropped a diagonal trackpad pan's `deltaY` entirely.
Apply the vertical component too, except under Shift, which remaps `deltaY`
onto the horizontal axis and so has none left to spend.

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/preview-wheel-zoom.test.ts

@@ -50,6 +50,27 @@ describe('bindPreviewHorizontalWheel', () => {
     expect(event.defaultPrevented).toBe(true)
   })
 
+  /**
+   * Cancelling a wheel event is all-or-nothing, so a diagonal trackpad pan must have its
+   * vertical movement re-applied by hand — otherwise `preventDefault` silently eats it.
+   */
+  it('keeps the vertical movement of a diagonal pan', () => {
+    Object.defineProperty(container, 'scrollHeight', { value: 5000, configurable: true })
+    Object.defineProperty(container, 'clientHeight', { value: 500, configurable: true })
+
+    wheel(container, { deltaX: 40, deltaY: 90 })
+
+    expect(container.scrollLeft).toBe(40)
+    expect(container.scrollTop).toBe(90)
+  })
+
+  it('does not also spend a shift gesture vertically', () => {
+    wheel(container, { deltaX: 0, deltaY: 120, shiftKey: true })
+
+    expect(container.scrollLeft).toBe(120)
+    expect(container.scrollTop).toBe(0)
+  })
+
   it('leaves a plain vertical wheel alone so the container still scrolls down', () => {
     const event = wheel(container, { deltaX: 0, deltaY: 120 })
 

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/preview-wheel-zoom.ts

@@ -18,16 +18,30 @@ function horizontalDeltaOf(event: WheelEvent): number {
 }
 
 /**
- * Scroll `container` horizontally for a wheel gesture. No-op when the gesture carries
- * no horizontal component or the container has nothing to scroll, leaving the event to
- * scroll vertically as usual.
+ * Vertical component still owed to the container once the horizontal one is taken.
+ * Shift *remaps* `deltaY` onto the horizontal axis, so that gesture has no vertical
+ * component left to spend; an ordinary diagonal trackpad pan does.
+ */
+function verticalDeltaOf(event: WheelEvent): number {
+  return event.deltaX !== 0 ? event.deltaY : 0
+}
+
+/**
+ * Scroll `container` for a wheel gesture carrying a horizontal component. No-op when the
+ * gesture is purely vertical or the container has nothing to scroll sideways, leaving the
+ * event to scroll natively.
+ *
+ * Cancelling a wheel event is all-or-nothing, so once `preventDefault` is called this owes
+ * the container *both* axes — a diagonal pan that only had its `deltaX` applied would lose
+ * its vertical movement entirely.
  */
 function applyHorizontalWheel(container: HTMLElement, event: WheelEvent): void {
   const horizontalDelta = horizontalDeltaOf(event)
   if (horizontalDelta === 0 || container.scrollWidth <= container.clientWidth) return
 
   event.preventDefault()
   container.scrollLeft += horizontalDelta
+  container.scrollTop += verticalDeltaOf(event)
 }
 
 /**