Fix animated curve3D model display width #223
Merged
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
Follow-up PR to #218 and #219 with further enhancements to the 3D animated curve render screen, so that it will occupy more up to the maximally available space and scale accordingly to browser width.
Demonstration and idea has been discussed and conveyed in #218, refer to the images below to see how it will look. Note the extra space surrounding the animation interface/render before and after the changes in this PR.
The PR is not linked to close the relevant issue (#218) after merging, in order to leave it open for further comments. However, if the issue is deemed resolved, you may go ahead and close it after merging this PR.
Technical Details: There is a surrounding
<div>
element added to the canvas output to center and align the animated render, with a top margin added to retain some space between the controls. Also, the whole component is wrapped in a single<div>
now which means the original fragment tags are no longer needed and hence removed.Type of change
Please delete options that are not relevant.
How Has This Been Tested?
Code has been tested locally, the width of the rendered animation should scale accordingly to the browser width and take up maximum available space. All linting and tests have passed with no additional warnings or errors introduced (by this PR).
Checklist:
(Note: not all checklist items might be applicable to this PR)