fix(desk): use correct dialog positioning at smaller breakpoints #4894
Conversation
This file contains 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
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
1 Ignored Deployment
|
|
Component Testing Report Updated Sep 6, 2023 11:41 AM (UTC)
|
ninaandal
approved these changes
Sep 5, 2023
Co-authored-by: Nina Andal Aarvik <nina@sanity.io>
robinpyon
force-pushed
the
feature/edx-197-studio-dialogs-are-incorrectly-positioned-on-mobile
branch
from
7ec4903
to
8515236
Compare
kaylasanity
approved these changes
Sep 7, 2023
bjoerge
approved these changes
Sep 8, 2023
robinpyon
deleted the
feature/edx-197-studio-dialogs-are-incorrectly-positioned-on-mobile
branch
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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
This PR ensures that object dialogs are correctly positioned at smaller breakpoints (when the desk collapses into a single pane layout).
There was previously a mismatch between theme breakpoints (used by
<DialogProvider>) and theminWidthvalue in<StyledPaneLayout>. Desk would collapse into a single pane at512pxwhilst dialogs would only usefixedpositioning at< 360px.This PR ensures the desk tool will collapse at a theme media breakpoint instead of a hardcoded value, so it should be in lock-step with
<DialogProvider>moving forward.What to review
Collapse your viewport enough so that the studio desk collapses into a single column layout.
In the following examples, scroll to the bottom of the page and click either the 'Sydney' or 'Melbourne' events
In the after case, object dialogs should appear correctly when scrolled down the page.
One byproduct of this change is that the studio collapses to a single column breakpoint a little earlier than previously (600px vs 512px). I believe this is an acceptable trade-off, but please chime if you think otherwise @kaylasanity
Notes for release
Fixes an issue where dialogs wouldn't correctly appear at smaller breakpoints