Skip to content

fix(web): make mobile sidebar auto-collapse idempotent - #9895

Open
BiswasNehaa wants to merge 1 commit into
makeplane:previewfrom
BiswasNehaa:fix/mobile-sidebar-auto-collapse-9356
Open

BiswasNehaa wants to merge 1 commit into
makeplane:previewfrom
BiswasNehaa:fix/mobile-sidebar-auto-collapse-9356

Conversation

@BiswasNehaa

@BiswasNehaa BiswasNehaa commented Sep 26, 2026 •

Copy link
Copy Markdown

Summary

  • Fixes the mobile-sidebar half of [bug]: v1.3.1 web app unusable on iOS/WebKit: unguarded requestIdleCallback crashes workspace pages; expanded sidebar overlays the board and swallows all taps #9356: on viewports narrower than 768px, the sidebar's auto-collapse effect called toggleSidebar() (a flip) instead of toggleSidebar(true) (a set).
  • The effect re-runs on windowSize changes but also reads sidebarCollapsed from closure (the exhaustive-deps lint rule is disabled on it), so a second re-run with a stale value can flip the sidebar back open right after it collapsed.
  • Since the expanded sidebar renders as an absolute, full-height, z-20 overlay on narrow viewports, this left it covering the board and swallowing every tap — reported as "tapping any kanban card does nothing" on iOS/WebKit.
  • Calling toggleSidebar(true) makes the effect idempotent: it can only ever assert "collapsed," so no number of stale re-fires can undo it.

The other bug reported in #9356 (unguarded window.requestIdleCallback) is already fixed upstream via the requestIdle/installIdleCallbackPolyfill wrapper in apps/web/lib/idle-task.ts, so this PR only addresses the sidebar overlay issue.

Test plan

  • Clear site data / use a fresh profile for localhost:3000 (so app_sidebar_collapsed is unset, matching the "fresh visitor" condition in the issue)
  • Emulate a viewport narrower than 768px (e.g. iPhone 13) in DevTools
  • Optionally throttle CPU 4-6x to make the timing race more likely to surface on unpatched code
  • Hard-reload a project board page several times; confirm the sidebar ends up collapsed (not overlaying the board) and app_sidebar_collapsed in localStorage stays "true"
  • Confirm tapping/clicking a work item card opens it

Fixes part of #9356.

🤖 Generated with Claude Code

Summary by CodeRabbit

  • Bug Fixes
    • On narrow screens, the sidebar now consistently collapses when the responsive layout is applied, rather than switching between open and closed states. This prevents it from unexpectedly reopening and provides a more predictable compact view on smaller displays, while keeping the sidebar available to open when needed.

toggleSidebar() with no argument flips the current state. The
auto-collapse effect in SidebarWrapper only re-runs on windowSize
changes but also reads sidebarCollapsed from closure, so a second
re-run with a stale value can flip the sidebar back open right
after it collapsed. On narrow viewports the expanded sidebar is an
absolute, full-height overlay, so this leaves it covering the
board and swallowing every tap.

Call toggleSidebar(true) instead so the effect sets the collapsed
state explicitly and can't undo itself no matter how many times it
re-fires.

Fixes part of makeplane#9356.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
@CLAassistant

CLAassistant commented Sep 26, 2026 •

Copy link
Copy Markdown

CLA assistant check
All committers have signed the CLA.

@coderabbitai

coderabbitai Bot commented Sep 26, 2026 •

Copy link
Copy Markdown
Contributor

Review in Change Stack →

Navigate logical layers of code changes, visualize relationships, and explore their blast radius.

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Advanced

Run ID: d1664402-f622-40f5-ba4f-32947485991a

📥 Commits

Reviewing files that changed from the base of the PR and between 888b086 and 55ef708.

📒 Files selected for processing (1)
  • apps/web/core/components/sidebar/sidebar-wrapper.tsx

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 9 remain after this review.


📝 Walkthrough

Walkthrough

On narrow viewports, SidebarWrapper now calls toggleSidebar(true) to collapse the sidebar instead of toggling its state. Comments describe avoiding a stale-closure rerun reopening it.

Changes

Narrow-Viewport Sidebar Collapse

Layer / File(s) Summary
Explicit sidebar collapse
apps/web/core/components/sidebar/sidebar-wrapper.tsx
The narrow-viewport effect calls toggleSidebar(true) instead of toggling the sidebar state. Comments describe avoiding a stale-closure rerun reopening it.

Priority: ➖ Normal

Estimated code review effort: 2 (Simple) | ~5 minutes

Change: Bug fix

Merge Risk: ⚪ Minimal · up to 55ef7

This is a small, low-risk fix that makes the mobile sidebar reliably collapse on narrow viewports without affecting other behavior.

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly and concisely describes the main change: making the mobile sidebar auto-collapse idempotent.
Description check ✅ Passed The description clearly explains the bug, root cause, scope, expected behavior, and test plan. It omits some template headings, but it identifies the change as a bug fix, includes relevant testing ste…
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 1…
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create a new PR

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

This branch has not been deployed

No deployments
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.

2 participants