supabase / supabase / 22146902745

73%

push

github

One liner: Adding more specific css to target open and closing animations without affecting the resize animation (#42069)

## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES

## What kind of change does this PR introduce?

Bug fix. One liner.

## What is the current behavior?

The resizable product menu to the left on drag responds with a slow drag
animation.
This is inconsistent with other resizable drag animations.


![supabase-resizable-before](https://github.com/user-attachments/assets/d8807aa9-2d9a-4371-a4a3-13f0983a1866)

## What is the new behavior?

the drag animation is consistent and snappy!


![supabase-resizable-after](https://github.com/user-attachments/assets/716c28af-3cba-4d97-8ee5-8d1331dd6bd5)


## Additional context

As far as I can tell the transition animation on the `ResizablePanel` is
for the open and closing of the menu and not for resizing. It looks like
a just overly broad transition target (`transition-all`).

The react-resizable-panels seems to use flex grow to do the animation.
The `transition-all` which is currently on the `ResizablePanel`
component is causing the flex grow to animate and this in turn is
causing some minor layout thrashing.
<img width="406" height="579" alt="Screenshot 2026-01-21 at 8 40 24 PM"
src="https://github.com/user-attachments/assets/9282731a-f1d6-411d-9092-25f0bddff29f"
/>

After this update the layout thrashing from flex-grow is fixed.
<img width="539" height="520" alt="Screenshot 2026-01-21 at 6 38 00 PM"
src="https://github.com/user-attachments/assets/dc2b2e28-8298-400e-8f19-77edaf6b9884"
/>

Related to [this](https://github.com/supabase/supabase/issues/27801)
issue.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Style**
* Refined sidebar animation to animate width-related properties only,
delivering smoother and more responsive open/close transitions without
changing timing... (continued)

814 of 915 branches covered (88.96%)

Branch coverage included in aggregate %.

3008 of 4277 relevant lines covered (70.33%)

114.91 hits per line