Repository navigation
Slide the Bot sidebar out and in instead of cutting it - #805
Conversation
Hiding the column unmounted it in one frame and the conversation's left margin had no transition, so both jumped. The column now stays mounted for its slide out, slides in when shown, and the conversation's left margin glides on the same spring. Reduced motion keeps the instant change.
Codex Review SummaryThis comment shows the latest Codex review activity on this pull request.
ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings. |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: d09249cbba
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| [class*="_centerCol"]{transition:margin-right ${SPRING_SHAPE.duration}ms ${SPRING_SHAPE.easing}} | ||
| /* The conversation's margins glide with the Bot panel's slide and with our left | ||
| column's slide in and out. */ | ||
| [class*="_centerCol"]{transition:margin-right ${SPRING_SHAPE.duration}ms ${SPRING_SHAPE.easing},margin-left ${SPRING_SHAPE.duration}ms ${SPRING_SHAPE.easing}} |
There was a problem hiding this comment.
When prefers-reduced-motion: reduce is enabled, toggling the sidebar still animates the conversation's left margin through the full spring duration. The new reduced-motion override disables only the sidebar's animation and transform transition, while TeamSidebar updates the conversation margin through chatRoom.setLeft() without suppressing this transition. Consequently, the sidebar disappears immediately but the conversation still slides across the screen. Add a reduced-motion override for the newly introduced margin transition so the entire toggle remains instantaneous.
Useful? React with 👍 / 👎.
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=60&v=4){kind=small}
There was a problem hiding this comment.
Devin Review found 2 potential issues.
1 flag not posted on this PR by your GitHub settings — view it in Devin Review. (Configure)
| [class*="_centerCol"]{transition:margin-right ${SPRING_SHAPE.duration}ms ${SPRING_SHAPE.easing}} | ||
| /* The conversation's margins glide with the Bot panel's slide and with our left | ||
| column's slide in and out. */ | ||
| [class*="_centerCol"]{transition:margin-right ${SPRING_SHAPE.duration}ms ${SPRING_SHAPE.easing},margin-left ${SPRING_SHAPE.duration}ms ${SPRING_SHAPE.easing}} |
There was a problem hiding this comment.
🟡 Conversation still slides with reduced motion
With reduced motion enabled, margin-left still animates when the sidebar toggles. The sidebar moves instantly, but the conversation keeps sliding.
Learn more
The sidebar's reduced-motion rule disables its own transform animation and transition, but this new conversation transition remains active. A sidebar toggle changes the margin through chatRoom.setLeft, so the conversation continues moving after the sidebar has appeared or disappeared.
Example: With the system's reduced-motion preference on, hide an open 280px sidebar. The sidebar vanishes immediately while the conversation slides into its place over the spring duration.
Recommended fix: Disable the new margin-left transition under prefers-reduced-motion: reduce, while retaining any existing right-margin behavior as appropriate. Verify both opening and closing from the open and rail modes.
Was this helpful? React with 👍 or 👎 to provide feedback.
| [class*="_centerCol"]{transition:margin-right ${SPRING_SHAPE.duration}ms ${SPRING_SHAPE.easing}} | ||
| /* The conversation's margins glide with the Bot panel's slide and with our left | ||
| column's slide in and out. */ | ||
| [class*="_centerCol"]{transition:margin-right ${SPRING_SHAPE.duration}ms ${SPRING_SHAPE.easing},margin-left ${SPRING_SHAPE.duration}ms ${SPRING_SHAPE.easing}} |
There was a problem hiding this comment.
🟡 Sidebar slide repeatedly reflows conversation
Toggling the sidebar makes margin-left animate across the entire conversation. Each frame reflows its content, contrary to the UI standard's single-reflow requirement.
Learn more
The center column contains the conversation and its composer. Animating its margin changes its layout width on every frame. The repository's UI standard, section 9.5, explicitly forbids animating margin for large content and requires giving expanding surfaces room immediately, then reclaiming space after shrinking surfaces finish.
Example: Hide an open sidebar beside a long conversation. Throughout the spring, the center column grows frame by frame and relays out the conversation rather than moving only a composited surface.
Recommended fix: Coordinate chatRoom.setLeft with sidebar entry and exit so the conversation changes width only once: allocate its final space before opening and reclaim space after closing. Animate only compositor-friendly transforms of the sidebar or a separate visual layer.
Was this helpful? React with 👍 or 👎 to provide feedback.
Collapsing or expanding the Bot sidebar (button or shortcut) snapped: the column unmounted in one frame and the conversation's left margin had no transition.
Verified: unit tests, lint, leak scan. Not yet checked by eye in the desktop app.