fix(web): keep sidebar closable on narrow viewports - #2526
Merged
Conversation
When the open sidebar squeezes the main column, the header toggle was clipped by flex overflow. Keep that control shrink-wrapped, and host the same toggle inside the sidebar below the auto-collapse breakpoint. Co-authored-by: Tyler Dane <tyler-dane@users.noreply.github.com>
Hide the header toggle while the narrow in-sidebar close is shown, and unmount that in-sidebar control as soon as the sidebar starts closing so collapse transitions do not leave two "Open sidebar" buttons. Co-authored-by: Tyler Dane <tyler-dane@users.noreply.github.com>
Address review findings: keep SelectView unclipped (no overflow-hidden on the header cluster), and use a distinct in-sidebar dismiss control that returns focus to the header open toggle after close. Co-authored-by: Tyler Dane <tyler-dane@users.noreply.github.com>
Keep the in-sidebar dismiss control while Day/Week event details hold the panel open, discard the draft on dismiss, and move focus to that control after opening from the header on narrow layouts. Co-authored-by: Tyler Dane <tyler-dane@users.noreply.github.com>
Co-authored-by: Tyler Dane <tyler-dane@users.noreply.github.com>
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
Summary
On narrow viewports, opening the sidebar squeezed the main column so the calendar header's "Close sidebar" toggle was clipped by flex overflow — leaving no visible way to dismiss the panel.
shrink-0column so left-side nav/title content yields first (withoutoverflow-hidden, so the SelectView menu still paints).SidebarToggleButtonfor the header.SidebarShellbelow the auto-collapse breakpoint (1280px), including while Day/Week event details keep the panel open.Simplicity
Reuse the existing toggle for the header; add a small dedicated dismiss control for the narrow in-sidebar case rather than remounting one control between header and sidebar (which caused focus/a11y issues).
Automated validation
Browser (http://localhost:9080/life):
Independent review
Confirmed findings fixed:
overflow-hidden— removedTest plan
bun test:web packages/web/src/components/Sidebar/SidebarShell.test.tsx packages/web/src/components/Sidebar/SidebarToggleButton.test.tsx packages/web/src/components/Sidebar/SidebarCloseButton.test.tsx packages/web/src/components/Sidebar/hooks/useIsNarrowSidebarLayout.test.ts packages/web/src/views/Life/LifeView.test.tsxbun run lintbun run type-check