Resizable panels now animate open and closed
Side panels across the webapp now slide in and out smoothly rather than snapping into place, giving the interface a more polished feel.
Resizable panels in the webapp no longer appear and disappear abruptly. When users open a detail panel—whether viewing run details, logs, deployments, or model information—the panel slides open with a smooth 200ms ease-in-out animation. Closing panels triggers the reverse animation.
The animation infrastructure was added as reusable primitives in the shared Resizable component: a global animation config defining timing and easing, a helper for controlling handle visibility, and a hook for freezing values during transitions to prevent content flicker.
This pattern was applied consistently across 11 pages including Runs, Logs, Deployments, Schedules, Batches, Models, Bulk Actions, and Waitpoints. A Storybook demo was added so developers can see the animation pattern in isolation.
Additional polish includes an animated search field that expands when focused with a clear button, improved table row hover states where text brightens, and fixes for a span selection bug and DOM nesting issues.
View Original GitHub Description
This is a small improvement mainly with the UI Skills file:
- Animate open and close the Resizable panels
- Uses the built in animation hooks from react-window-splitter
- Includes a global variable for the animation easing and timing for consistency
https://github.com/user-attachments/assets/50ed0019-ed12-4e08-b95c-7c6d1fe5bac0