fix(webapp): Fix for resizable side panel getting stuck at its min-size (#3538)

## Summary - Run-view inspector panel was glitching out on Firefox: visual flicker on close, locking up at min size, and intermittent `panelHasSpace` invariant errors. Root cause is the underlying `react-window-splitter` library's collapse animation, which uses `@react-spring/rafz` and interacts poorly with Firefox. - Disabled the library's collapse animation on Firefox only, app-wide (every consumer of `RESIZABLE_PANEL_ANIMATION`). Chromium and Safari behaviour is unchanged. ## Changes - **Firefox animation skip** in `RESIZABLE_PANEL_ANIMATION` — UA-detected at module load, resolves to `undefined` for Firefox so the library's animation actor completes in one frame instead of running its rAF loop. - **Inspector min raised 50px → 250px** so dragging can't shrink the panel into a near-useless width. - **`autosaveId` bumped `v2` → `v3`** to invalidate stale persisted snapshots (the library has a `// TODO` branch that ignores prop changes for already-registered panels, so existing users would otherwise still see the old 50px min). - **`react-window-splitter` pinned** to exact `0.4.1` to protect the patch from drifting if line offsets change in a patch release. - **Two hunks added to the existing `@window-splitter/state` patch:** - Removed the library's auto-collapse-on-drag block entirely. Every collapsible panel in the app is parent-controlled, and that block was triggering state-machine deadlocks when handlers were no-ops. Drag-to-collapse is now disabled across the app; collapse is only triggered explicitly (close button, ESC, URL change, etc.). - In `getDeltaForEvent`, fall back to the panel's `default` before its `min` when expanding — so the first ever click on a span opens the inspector at 500px, not 250px. ## Local testing confirmed - [x] Firefox: open a run, click various spans → panel opens instantly at 500px, drags freely between 250px and max, closes instantly to 0. No console errors. - [x] Chrome/Chromium: same flow, but with smooth open/close animation as before. - [x] Safari: same as Chrome. - [x] Reload mid-session → panel restores cleanly to the dragged size. - [x] Other resizable panels in the app (logs, deployments, schedules, batches, bulk-actions, runs index) still animate on Chromium/Safari. ## Notes - Linear: TRI-8584 - Branch contains intermediate commits exploring an unsuccessful snapshot-validator approach; they're reverted by the final commit. Cumulative diff is 6 files. Squash on merge if you'd prefer a clean history. --------- Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-10 21:31:01 +01:00
parent ead1e5a53d
commit 6cdd8814a3
9 changed files with 520 additions and 1800 deletions
@@ -0,0 +1,6 @@
+---
+area: webapp
+type: fix
+---
+
+Fix the run-view inspector panel glitching out and locking up in Firefox. Disabled the underlying resizable library's collapse animation on Firefox (where its `requestAnimationFrame`-driven actor caused visual glitches and intermittent state-machine errors) while keeping it intact for Chromium and Safari, and bumped the inspector minimum from 50px to 250px so dragging can't shrink the panel into a near-useless width.
@@ -1,7 +1,7 @@
 "use client";

 import React, { useRef } from "react";
-import { PanelGroup, Panel, PanelResizer } from "react-window-splitter";
+import { PanelGroup, Panel, PanelResizer } from "@window-splitter/react";
 import { cn } from "~/utils/cn";

 const ResizablePanelGroup = ({ className, ...props }: React.ComponentProps<typeof PanelGroup>) => (
@@ -69,10 +69,14 @@ const ResizableHandle = ({
  </PanelResizer>
 );

-const RESIZABLE_PANEL_ANIMATION = {
-  easing: "ease-in-out" as const,
-  duration: 200,
-};
+// react-window-splitter drives the collapse animation through @react-spring/rafz,
+// which has timing/interaction issues with Firefox that produce visual glitches
+// (alternating frames, panels stuck at min, panelHasSpace invariant violations).
+// Disable the animation on Firefox; it works correctly in Chromium and Safari.
+const RESIZABLE_PANEL_ANIMATION =
+  typeof navigator !== "undefined" && /firefox/i.test(navigator.userAgent)
+    ? undefined
+    : ({ easing: "ease-in-out", duration: 300 } as const);

 const COLLAPSIBLE_HANDLE_CLASSNAME = "transition-opacity duration-200";

@@ -15,7 +15,7 @@ import { DiscordIcon } from "@trigger.dev/companyicons";
 import { formatDurationMilliseconds } from "@trigger.dev/core/v3";
 import type { TaskRunStatus } from "@trigger.dev/database";
 import { Fragment, Suspense, useCallback, useEffect, useRef, useState } from "react";
-import type { PanelHandle } from "react-window-splitter";
+import type { PanelHandle } from "@window-splitter/react";
 import { Bar, BarChart, ResponsiveContainer, Tooltip, type TooltipProps } from "recharts";
 import { TypedAwait, typeddefer, useTypedLoaderData } from "remix-typedjson";
 import { ExitIcon } from "~/assets/icons/ExitIcon";
@@ -115,7 +115,7 @@ import { SpanView } from "../resources.orgs.$organizationSlug.projects.$projectP

 const resizableSettings = {
  parent: {
-    autosaveId: "panel-run-parent-v2",
+    autosaveId: "panel-run-parent-v3",
    handleId: "parent-handle",
    main: {
      id: "run",
@@ -124,7 +124,7 @@ const resizableSettings = {
    inspector: {
      id: "inspector",
      default: "500px" as const,
-      min: "50px" as const,
+      min: "250px" as const,
    },
  },
  tree: {
@@ -135,6 +135,7 @@
    "@upstash/ratelimit": "^1.1.3",
    "@vercel/sdk": "^1.19.1",
    "@whatwg-node/fetch": "^0.9.14",
+    "@window-splitter/react": "1.1.3",
    "ai": "^4.3.19",
    "assert-never": "^1.2.1",
    "aws4fetch": "^1.0.18",
@@ -199,7 +200,6 @@
    "react-resizable-panels": "^2.0.9",
    "react-stately": "^3.29.1",
    "react-use": "17.5.1",
-    "react-window-splitter": "^0.4.1",
    "recharts": "^2.15.2",
    "regression": "^2.0.1",
    "remix-auth": "^3.6.0",
@@ -82,7 +82,7 @@
      "@sentry/remix@9.46.0": "patches/@sentry__remix@9.46.0.patch",
      "@upstash/ratelimit@1.1.3": "patches/@upstash__ratelimit.patch",
      "antlr4ts@0.5.0-alpha.4": "patches/antlr4ts@0.5.0-alpha.4.patch",
-      "@window-splitter/state@0.4.1": "patches/@window-splitter__state@0.4.1.patch"
+      "@window-splitter/state@1.1.3": "patches/@window-splitter__state@1.1.3.patch"
    },
    "overrides": {
      "typescript": "5.5.4",
@@ -1,28 +0,0 @@
-diff --git a/dist/commonjs/index.js b/dist/commonjs/index.js
-index acb542b1b71a7e808173d938d16f45a484334f94..dc9289461b761f8f0d5c72919f48f94e394addfd 100644
--- a/dist/commonjs/index.js
-+++ b/dist/commonjs/index.js
-@@ -107,6 +107,9 @@ function prepareSnapshot(snapshot) {
-             if (item.max && item.max !== "1fr") {
-                 item.max.value = new big_js_1.default(item.max.value);
-             }
-+            if (item.default && typeof item.default === "object" && item.default.value !== undefined) {
-+                item.default.value = new big_js_1.default(item.default.value);
-+            }
-         }
-         else {
-             item.size.value = new big_js_1.default(item.size.value);
-diff --git a/dist/esm/index.js b/dist/esm/index.js
-index 8891ac0141135a3a885bd704d9d443458c7a01bf..34cd7251f2298e7f9bfedfe4cadb797aa790b59a 100644
--- a/dist/esm/index.js
-+++ b/dist/esm/index.js
-@@ -81,6 +81,9 @@ export function prepareSnapshot(snapshot) {
-             if (item.max && item.max !== "1fr") {
-                 item.max.value = new Big(item.max.value);
-             }
-+            if (item.default && typeof item.default === "object" && item.default.value !== undefined) {
-+                item.default.value = new Big(item.default.value);
-+            }
-         }
-         else {
-             item.size.value = new Big(item.size.value);
@@ -0,0 +1,114 @@
+diff --git a/dist/commonjs/index.js b/dist/commonjs/index.js
+index e3bdcf702702392e9a06c981545f659ee7c5970e..d88ae6b2dc5b4cf1970cb693f58a926bd12a8f45 100644
+--- a/dist/commonjs/index.js
+++ b/dist/commonjs/index.js
+@@ -757,30 +757,14 @@ function updateLayout(context, dragEvent) {
+             panelAfter.onCollapseChange.current(false);
+         }
+     }
+-    const panelBeforeIsAboutToCollapse = panelBefore.currentValue.value.eq(getUnitPixelValue(context, panelBefore.min));
+-    // If the panel was expanded and now is at it's min size, collapse it
+-    if (!dragEvent.disregardCollapseBuffer &&
+-        panelBefore.collapsible &&
+-        panelBeforeIsAboutToCollapse) {
+-        if (panelBefore.onCollapseChange?.current &&
+-            panelBefore.collapseIsControlled &&
+-            !dragEvent.controlled &&
+-            !dragEvent.isVirtual) {
+-            panelBefore.onCollapseChange.current(true);
+-            return { dragOvershoot: newDragOvershoot };
+-        }
+-        // Make it collapsed
+-        panelBefore.collapsed = true;
+-        panelBeforeNewValue = getUnitPixelValue(context, panelBefore.collapsedSize);
+-        // Add the extra space created to the before panel
+-        panelAfterNewValue = panelAfter.currentValue.value.add(panelBeforePreviousValue.minus(panelBeforeNewValue));
+-        if (panelBefore.onCollapseChange?.current &&
+-            !panelBefore.collapseIsControlled &&
+-            !dragEvent.controlled &&
+-            !dragEvent.isVirtual) {
+-            panelBefore.onCollapseChange.current(true);
+-        }
+-    }
+    // Drag-to-collapse is disabled in this fork: every consumer of the
+    // library uses controlled `collapsed` props and triggers collapse
+    // explicitly (close button, ESC, URL change, etc.). The original auto-
+    // collapse-on-drag logic that lived here would notify the parent when a
+    // collapsible panel reached its min during a drag — keeping it for our
+    // (controlled-only) case caused state-machine deadlocks when handlers
+    // were no-ops, so the block is removed entirely. Panels just clamp at
+    // `min` during drag now.
+     panelBefore.currentValue = { type: "pixel", value: panelBeforeNewValue };
+     panelAfter.currentValue = { type: "pixel", value: panelAfterNewValue };
+     const leftoverSpace = new big_js_1.default(getGroupSize(context)).minus(newItems.reduce((acc, b) => acc.add(isPanelData(b) ? b.currentValue.value : b.size.value), new big_js_1.default(0)));
+@@ -940,7 +924,12 @@ function setCookie(name, jsonData) {
+ function getDeltaForEvent(context, event) {
+     const panel = getPanelWithId(context, event.panelId);
+     if (event.type === "expandPanel") {
+-        return new big_js_1.default(panel.sizeBeforeCollapse ?? getUnitPixelValue(context, panel.min)).minus(panel.currentValue.value);
+        // Fall back to `default` before `min` so the first-ever expand of a
+        // panel that started life collapsed lands at its configured default
+        // size rather than getting stuck at `min`.
+        const defaultPx = panel.default ? getUnitPixelValue(context, panel.default) : undefined;
+        const target = panel.sizeBeforeCollapse ?? defaultPx ?? getUnitPixelValue(context, panel.min);
+        return new big_js_1.default(target).minus(panel.currentValue.value);
+     }
+     const collapsedSize = getUnitPixelValue(context, panel.collapsedSize);
+     return panel.currentValue.value.minus(collapsedSize);
+diff --git a/dist/esm/index.js b/dist/esm/index.js
+index f8fddd70c0f1aaed29f2fb0ca0d8093d8ce66335..d1dae8beb1447afca47b91e796b8279135f50c36 100644
+--- a/dist/esm/index.js
+++ b/dist/esm/index.js
+@@ -728,30 +728,14 @@ function updateLayout(context, dragEvent) {
+             panelAfter.onCollapseChange.current(false);
+         }
+     }
+-    const panelBeforeIsAboutToCollapse = panelBefore.currentValue.value.eq(getUnitPixelValue(context, panelBefore.min));
+-    // If the panel was expanded and now is at it's min size, collapse it
+-    if (!dragEvent.disregardCollapseBuffer &&
+-        panelBefore.collapsible &&
+-        panelBeforeIsAboutToCollapse) {
+-        if (panelBefore.onCollapseChange?.current &&
+-            panelBefore.collapseIsControlled &&
+-            !dragEvent.controlled &&
+-            !dragEvent.isVirtual) {
+-            panelBefore.onCollapseChange.current(true);
+-            return { dragOvershoot: newDragOvershoot };
+-        }
+-        // Make it collapsed
+-        panelBefore.collapsed = true;
+-        panelBeforeNewValue = getUnitPixelValue(context, panelBefore.collapsedSize);
+-        // Add the extra space created to the before panel
+-        panelAfterNewValue = panelAfter.currentValue.value.add(panelBeforePreviousValue.minus(panelBeforeNewValue));
+-        if (panelBefore.onCollapseChange?.current &&
+-            !panelBefore.collapseIsControlled &&
+-            !dragEvent.controlled &&
+-            !dragEvent.isVirtual) {
+-            panelBefore.onCollapseChange.current(true);
+-        }
+-    }
+    // Drag-to-collapse is disabled in this fork: every consumer of the
+    // library uses controlled `collapsed` props and triggers collapse
+    // explicitly (close button, ESC, URL change, etc.). The original auto-
+    // collapse-on-drag logic that lived here would notify the parent when a
+    // collapsible panel reached its min during a drag — keeping it for our
+    // (controlled-only) case caused state-machine deadlocks when handlers
+    // were no-ops, so the block is removed entirely. Panels just clamp at
+    // `min` during drag now.
+     panelBefore.currentValue = { type: "pixel", value: panelBeforeNewValue };
+     panelAfter.currentValue = { type: "pixel", value: panelAfterNewValue };
+     const leftoverSpace = new Big(getGroupSize(context)).minus(newItems.reduce((acc, b) => acc.add(isPanelData(b) ? b.currentValue.value : b.size.value), new Big(0)));
+@@ -911,7 +895,12 @@ function setCookie(name, jsonData) {
+ function getDeltaForEvent(context, event) {
+     const panel = getPanelWithId(context, event.panelId);
+     if (event.type === "expandPanel") {
+-        return new Big(panel.sizeBeforeCollapse ?? getUnitPixelValue(context, panel.min)).minus(panel.currentValue.value);
+        // Fall back to `default` before `min` so the first-ever expand of a
+        // panel that started life collapsed lands at its configured default
+        // size rather than getting stuck at `min`.
+        const defaultPx = panel.default ? getUnitPixelValue(context, panel.default) : undefined;
+        const target = panel.sizeBeforeCollapse ?? defaultPx ?? getUnitPixelValue(context, panel.min);
+        return new Big(target).minus(panel.currentValue.value);
+     }
+     const collapsedSize = getUnitPixelValue(context, panel.collapsedSize);
+     return panel.currentValue.value.minus(collapsedSize);