fix(web): hide mobile sidebar after thread selection or creation#1293
fix(web): hide mobile sidebar after thread selection or creation#1293murataslan1 wants to merge 1 commit intopingdotgg:mainfrom
Conversation
On narrow viewports, the sidebar stayed open after selecting or creating a thread, obscuring the thread content. Now the sidebar closes automatically on mobile when: - Clicking an existing thread - Pressing Enter/Space on a thread row - Clicking the "New Thread" button Desktop behavior is unchanged. Fixes pingdotgg#1258
|
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)
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 |
There was a problem hiding this comment.
Pull request overview
This PR fixes a mobile UX issue in the web app where the off-canvas thread sidebar remained open after selecting or creating a thread, obscuring the main thread content on narrow viewports.
Changes:
- Close the mobile sidebar on plain thread selection (mouse click).
- Close the mobile sidebar on keyboard activation of a thread row (Enter/Space).
- Close the mobile sidebar when clicking “New Thread”.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| if (isMobile) { | ||
| setOpenMobile(false); | ||
| } |
There was a problem hiding this comment.
The nearby comment describing the plain-click behavior doesn’t mention that we now also close the mobile sidebar. Please update the comment so it remains accurate.
| } | ||
| setSelectionAnchor(thread.id); | ||
| if (isMobile) { | ||
| setOpenMobile(false); | ||
| } |
There was a problem hiding this comment.
This Enter/Space handler duplicates the same “activate thread” steps as the click path (clear selection, set anchor, close mobile sidebar, navigate). Consider extracting a shared helper and calling it from both handlers to prevent the two paths drifting over time.
Summary
On narrow viewports, the sidebar stayed open after selecting or creating a thread, obscuring the thread content.
Fix
Close the mobile sidebar automatically when:
Desktop behavior is unchanged — uses
isMobilefromuseSidebar()to gate the behavior.Test plan
Fixes #1258
Note
Close mobile sidebar on thread selection or creation
In Sidebar.tsx,
setOpenMobile(false)is called whenisMobileis true in three places: plain-click thread navigation, keyboard (Enter/Space) thread activation, and new thread creation from a project action button.Macroscope summarized c893513.