You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
fix(web): keep the mobile sidebar toggle reachable on project pages - #10274
With the tabbed project navigation on a phone, the sidebar's own collapse toggle can disappear and leave you with no way to close the sidebar. Steps: open the sidebar from the header icon, pick a project, then try to close the sidebar. The icon at the top left is now the project icon, not the sidebar toggle.
Two causes:
On mobile the sidebar is an absolute overlay at z-20. The tabbed project header (z-20 wrapper in projects/(detail)/[projectId]/layout.tsx, and the same in browse/[workItem]/header.tsx) is a flex item that comes later in the DOM, so it wins the tie and its opaque bar paints over the top of the sidebar, covering the sidebar's toggle button.
In tabbed mode, tapping a project in the sidebar only does router.push, so on mobile the sidebar stays open over the page. Every other sidebar link (sidebar-item.tsx, project-navigation.tsx, favourites) collapses it below 768px.
Changes:
resizable-sidebar.tsx: the mobile overlay uses z-30, above the page headers (dialogs and popovers from propel use z-50 and up, so they still sit above it).
projects-list-item.tsx: in the non-accordion branch, collapse the sidebar below 768px after navigating, matching the other links. Accordion mode only expands the project's sub-menu, so it is left alone.
Desktop is unchanged: the z-30 only applies when isMobile is true, and the collapse only runs below 768px.
Type of Change
Bug fix (non-breaking change which fixes an issue)
Feature (non-breaking change which adds functionality)
Improvement (change that would cause existing functionality to not work as expected)
Code refactoring
Performance improvements
Documentation update
Test Scenarios
tsc --noEmit, oxfmt --check and oxlint clean on the two files (same 3 pre-existing lint warnings as before).
Ran the real cn() over the sidebar's class list for isMobile/isCollapsed in all four combinations: the output is byte-identical to before when isMobile is false, and z-30 replaces z-20 when true.
Reproduced the stacking in a minimal replica of the layout in headless Chromium at 375px: before, a hit test at the sidebar toggle lands on the header; with the sidebar at z-30 it lands on the toggle.
Verified on a real phone (Android, Brave) running a self-hosted instance with this patch: the toggle stays visible and picking a project closes the sidebar.
In tabbed navigation the project header (z-20, painted later) sits on top
of the mobile sidebar (also z-20), so it covers the sidebar's own toggle
and only the project icon shows. The sidebar also stayed open after a
project was picked, unlike every other sidebar link on mobile.
- raise the mobile sidebar overlay above the page headers
- collapse the sidebar on mobile when a project is opened
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
No actionable comments were generated in the recent review.
Walkthrough
The mobile sidebar now receives a higher stacking class. When a project is opened through non-accordion navigation on a viewport narrower than 768 pixels, the sidebar is collapsed after navigation.
Changes: Mobile sidebar behavior
Layer / File(s)
Summary
Mobile sidebar stacking apps/web/components/sidebar/resizable-sidebar.tsx
The mobile-only class adds z-30 alongside absolute.
For non-accordion navigation, the click handler calls toggleSidebar(true) after navigating to the project’s default tab when the viewport is narrower than 768 pixels.
makeplane/plane issue 9356: The issue describes a mobile sidebar overlay that can swallow board taps. This PR changes the overlay stacking class and collapses the sidebar after project navigation.
Possibly related PRs
makeplane/plane#9895: Both PRs call toggleSidebar(true) below 768 pixels to set the sidebar to a collapsed state.
Suggested labels:🎨UI / UX
Merge Risk: Minimal · up to 1cca3
The change makes the mobile sidebar toggle reachable and collapses the sidebar after a project is opened on narrow screens. No actionable merge-blocking risk was identified.
Pre-merge checks: 4
Check name
Status
Explanation
Title check
The title names the main change: the mobile sidebar toggle stays reachable on project pages. It uses the conventional commit form and matches the two fixes in the changeset: the z-20 to z-30 overlay c…
Description check
The description follows the repository template. It includes the Description, Type of Change (Bug fix checked), Test Scenarios, and References sections. The Screenshots and Media section is missing, b…
Linked Issues check
Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check
Check skipped because no linked issues were found for this pull request.
Full details: Title check
Explanation
The title names the main change: the mobile sidebar toggle stays reachable on project pages. It uses the conventional commit form and matches the two fixes in the changeset: the z-20 to z-30 overlay change in resizable-sidebar.tsx and the sidebar collapse after navigation in projects-list-item.tsx. It is 67 characters, within a normal title length.
Full details: Description check
Explanation
The description follows the repository template. It includes the Description, Type of Change (Bug fix checked), Test Scenarios, and References sections. The Screenshots and Media section is missing, but the template marks it as applicable only when relevant, and the author gives a clear reproduction path. The description explains the root causes, the two file changes, and why desktop is unaffected.
Finishing Touches
Generate unit tests (beta)
Create a new PR
Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts
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.
Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 9 remain after this review.
This branch has not been deployed
No deployments
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
With the tabbed project navigation on a phone, the sidebar's own collapse toggle can disappear and leave you with no way to close the sidebar. Steps: open the sidebar from the header icon, pick a project, then try to close the sidebar. The icon at the top left is now the project icon, not the sidebar toggle.
Two causes:
absoluteoverlay atz-20. The tabbed project header (z-20wrapper inprojects/(detail)/[projectId]/layout.tsx, and the same inbrowse/[workItem]/header.tsx) is a flex item that comes later in the DOM, so it wins the tie and its opaque bar paints over the top of the sidebar, covering the sidebar's toggle button.router.push, so on mobile the sidebar stays open over the page. Every other sidebar link (sidebar-item.tsx,project-navigation.tsx, favourites) collapses it below 768px.Changes:
resizable-sidebar.tsx: the mobile overlay usesz-30, above the page headers (dialogs and popovers from propel usez-50and up, so they still sit above it).projects-list-item.tsx: in the non-accordion branch, collapse the sidebar below 768px after navigating, matching the other links. Accordion mode only expands the project's sub-menu, so it is left alone.Desktop is unchanged: the
z-30only applies whenisMobileis true, and the collapse only runs below 768px.Type of Change
Test Scenarios
tsc --noEmit,oxfmt --checkandoxlintclean on the two files (same 3 pre-existing lint warnings as before).cn()over the sidebar's class list for isMobile/isCollapsed in all four combinations: the output is byte-identical to before whenisMobileis false, andz-30replacesz-20when true.z-30it lands on the toggle.References
No existing issue found.
🤖 Generated with Claude Code
Summary by CodeRabbit