Merge remote-tracking branch 'origin/pr-3319-fix' into fix-pr-3321

# Conflicts:
#	apps/webapp/app/components/primitives/Resizable.tsx
#	apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.logs/route.tsx
#	apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx

Author: deepshekhardas

.changeset/animated-resizable-panel.md

@@ -0,0 +1,8 @@
+---
+"@trigger.dev/core": patch
+"@trigger.dev/sdk": patch
+---
+
+Feat(webapp): animated resizable panel
+
+Adds animated open/close transitions to Resizable panels using react-window-splitter built-in animation hooks. Includes new exports: RESIZABLE_PANEL_ANIMATION, collapsibleHandleClassName(), and useFrozenValue(). Converts inspector/detail side panels from conditionally-mounted to always-mounted collapsible panels across multiple routes (batches, runs, schedules, deployments, logs, waitpoints, bulk-actions).

apps/webapp/app/components/primitives/Resizable.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import React, { useRef } from "react";
-import { PanelGroup, Panel, PanelResizer } from "@window-splitter/react";
+import { PanelGroup, Panel, PanelResizer } from "react-window-splitter";
 import { cn } from "~/utils/cn";
 
 const ResizablePanelGroup = ({ className, ...props }: React.ComponentProps<typeof PanelGroup>) => (
@@ -69,14 +69,10 @@ const ResizableHandle = ({
   </PanelResizer>
 );
 
-// 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 RESIZABLE_PANEL_ANIMATION = {
+  easing: "ease-in-out" as const,
+  duration: 200,
+};
 
 const COLLAPSIBLE_HANDLE_CLASSNAME = "transition-opacity duration-200";
 

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.logs/route.tsx

@@ -413,7 +413,7 @@ function LogsList({
   const frozenLogId = useFrozenValue(selectedLogId);
   const frozenLog = useFrozenValue(selectedLog);
   const displayLogId = selectedLogId ?? frozenLogId;
-  const displayLog = selectedLog ?? frozenLog ?? undefined;
+  const displayLog = selectedLog ?? frozenLog;
 
   const updateUrlWithLog = useCallback((logId: string | undefined) => {
     const url = new URL(window.location.href);

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx

@@ -617,7 +617,7 @@ function TraceView({
     ? linkedRunIdBySpanId?.[selectedSpanId]
     : undefined;
   const frozenLinkedRunId = useFrozenValue(selectedSpanLinkedRunId);
-  const displayLinkedRunId = (selectedSpanId ? selectedSpanLinkedRunId : frozenLinkedRunId) ?? undefined;
+  const displayLinkedRunId = selectedSpanId ? selectedSpanLinkedRunId : frozenLinkedRunId;
 
   return (
     <div className={cn("grid h-full max-h-full grid-cols-1 overflow-hidden")}>