fix(web): fix sidebar project drag clipping with variable-height items#1176
Conversation
|
Important Review skippedAuto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
📝 Coding Plan
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment Tip CodeRabbit can generate a title for your PR based on the changes with custom instructions.Set the |
github-actions
bot
added
size:XS
|
Small note: with this change the dragged item can move slightly above the projects header and into the empty space below the list. Happy to tighten it with a custom modifier if that's a concern. |
2 participants
What Changed
Replaced
restrictToParentElementwithrestrictToFirstScrollableAncestorin the sidebar project drag-and-drop modifiers.Why
When dragging a project with many expanded threads toward the bottom of the list, the dragged item gets visually clipped if it's taller than the project below it. This happens because
restrictToParentElementconstrains the entire dragged element within the parent element's bounds, which doesn't leave enough room for tall items to reach the last position.This is a known dnd-kit issue with variable-height sortable items.
restrictToFirstScrollableAncestorconstrains to the sidebar'sScrollAreaviewport instead, which gives enough room for tall items while still keeping the drag bounded.UI Changes
Before:
Screencast.From.2026-03-17.22-10-02.mp4
After:
Screencast.From.2026-03-17.22-10-54.mp4
Checklist
Note
Fix sidebar project drag clipping by switching to
restrictToFirstScrollableAncestorThe drag modifier in Sidebar.tsx is changed from
restrictToParentElementtorestrictToFirstScrollableAncestor, fixing visual clipping when dragging variable-height items in the projects list. The vertical axis constraint is unchanged.Macroscope summarized f62ef92.