Skip to content

fix(sidebar): smooth inset collapsed margin with 200ms linear transition#9661

Open
mohit4bug wants to merge 3 commits intoshadcn-ui:mainfrom
mohit4bug:fix/sidebar-inset-margin-animation-sync
Open

fix(sidebar): smooth inset collapsed margin with 200ms linear transition#9661
mohit4bug wants to merge 3 commits intoshadcn-ui:mainfrom
mohit4bug:fix/sidebar-inset-margin-animation-sync

Conversation

@mohit4bug
Copy link
Contributor

Issue

In inset sidebar mode, collapsing/expanding caused a visible content jump.
The sidebar width was animating, but the inset margin state change felt abrupt, creating a brief backward flicker.

Fix

Applied a margin transition to inset spacing so content movement stays in sync with sidebar motion:

  • transition-[margin]
  • duration-200
  • ease-linear

This keeps behavior unchanged while smoothing the visual transition.

Before

Inset content snaps/jumps when the sidebar collapses, causing a noticeable backward flicker.

before.mov

After

Inset content transitions smoothly with sidebar collapse/expand, with no snap or flicker.

after.mov

@vercel
Copy link
Contributor

vercel bot commented Feb 17, 2026

@mohit4bug is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

@vercel
Copy link
Contributor

vercel bot commented Feb 17, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
ui Ready Ready Preview, Comment Feb 17, 2026 6:47pm

Request Review

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant

Comments