Fix viewport selection bug #424
Merged
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
alextaing
reviewed
Oct 25, 2023
alextaing
reviewed
Oct 25, 2023
Merged
alextaing
added a commit
that referenced
this pull request
Oct 30, 2023
## Features - We have introduced Collapsible Sidebars (#408). - We now support aliased type imports (#411). - The TypeScript utility types Omit, Pick, and Required are now supported for props in a component's prop interface (#413, #414, #415). - The Studio Preview can now display CSS and SCSS styling (#418). - Undo keyboard shortcuts (`cmd+z` for OS X, and `ctrl+z` for other OSes) are now supported in Studio (#417). ## Changes - `_server.tsx` and `_client.tsx` are now reserved template names for PagesJS Repos (#423). ## Fixes - Miscellaneous viewport bugs have been fixed (#424).
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.
This PR fixes a bug with viewport selection where some changes to aspect ratio didn't properly apply the correct style (i.e. applied
w-fullinstead ofh-fullor vice versa). Aaron also had some confusion as to why the size of the iFrame didn't match the pixel values displayed for each viewport. So, to fix both things, I updated the viewport styling to use exact pixel values instead of the aspect ratio. Now, if a viewport is wider than the size of the preview panel, the overflow width is hidden but scrollable. But, even our largest viewports can still be viewed in full by collapsing the sidebars. If the viewport is longer than the size of the preview panel, the length of the Studio page expands to encompass it.Also, this fixes another odd UX case where changing the active component would change the iFrame size because if one component had a lot of props, the prop editing panel on the right side would be very long and increase the length of the page. And since we were using aspect ratio and if it was fit to
h-full, then the change in page height was cause the "zoom" of the iFrame to increase, which would look like an unexpected width increase in the iFrame despite being on the same viewport when switching between active components.J=SLAP-2970
TEST=manual
Tested that the bug Aaron reported was no longer occurring locally or in Studio in Storm. Saw that exact pixel values were used for the iFrame width and height instead of aspect ratios.