fix: settings sidebar overlap and z-index issues on small screens#1134
Closed
vianmora wants to merge 1 commit intoHiEventsDev:developfrom
Closed
fix: settings sidebar overlap and z-index issues on small screens#1134vianmora wants to merge 1 commit intoHiEventsDev:developfrom
vianmora wants to merge 1 commit intoHiEventsDev:developfrom
Conversation
Contributor
|
All contributors have signed the CLA ✍️ ✅ |
vianmora
force-pushed
the
bugfix/issue-1133-settings-sidebar-overlap
branch
2 times, most recently
from
dbd08e9 to
18f2f1b
Compare
Replace viewport-based useMediaQuery with CSS container queries so the two-column layout (nav sidebar + content) responds to the actual available container width rather than the full viewport. This prevents the inner navigation from being hidden behind settings panels on ~13" screens where the app sidebar consumes 280px of the viewport. Also raises the z-index of the sidebar toggle button above the inner navigation sidebar to prevent it from being obscured when the app sidebar is closed. Fixes HiEventsDev#1133
vianmora
force-pushed
the
bugfix/issue-1133-settings-sidebar-overlap
branch
from
18f2f1b to
7442004
Compare
Contributor
|
Closing as this issue is not reproducible. See #1133 (comment) |
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 subscribe to this conversation on GitHub.
Already have an account?
Sign in.
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.
Fixes #1133
On ~13" screens (~1280px wide), the app sidebar consumes 280px, leaving ~936px for the content area. The previous
useMediaQuery('(min-width: 1200px)')viewport breakpoint triggered the two-column layout (1280 > 1200) even when the available space was too narrow, causing the inner settings navigation to be hidden behind settings panels or overlapped by Mantine form components.Changes:
useMediaQueryviewport check with CSS container queries inevent/Settingsandorganizer/Settings— the two-column layout now responds to the actual available container width, not the viewportz-index: 10on the sticky inner navigation sidebar to prevent Mantine components (Select, DatePicker…) from rendering on top of it5to20so it stays accessible above the inner nav sidebarContainer query threshold (1000px):
Checklist