Merged
Size
L
Change Breakdown
Feature85%
Style15%
#3319Feat(webapp): animated resizable panel

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

© 2026 · via Gitpulse