Fix height of Plotly wrappers #195
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
|
No need for rebasing 👍 |
JavaScript CoverageSummary
Modified Files • (65%)
|
jmelot
force-pushed
the
116-charts-overlap
branch
from
cb4477f to
5afe79e
Compare
jmelot
requested changes
Jan 22, 2024
brianlove
added a commit
that referenced
this pull request
Jan 22, 2024
The different SVG heights for phone vs larger viewports seems to cause its own issues with overlapping charts (see comments in #195), so stick to a consistent height (450px) across all viewport widths.
brianlove
force-pushed
the
116-charts-overlap
branch
from
5afe79e to
5d0e0aa
Compare
The `div.svg-container` elements wrapping the Plotly SVG charts was getting `height: 100%;` set under certain viewport widths (instead of the fixed height set under other viewport widths), which led to the charts overlapping each other and other content. By fixing the height of div above that one, we can keep the chart dimensions consistent. Made the charts slightly smaller on phone-sized viewports since they didn't seem to need to be quite as tall in that case. Updated browserslist DB Closes #116
The different SVG heights for phone vs larger viewports seems to cause its own issues with overlapping charts (see comments in #195), so stick to a consistent height (450px) across all viewport widths.
jmelot
force-pushed
the
116-charts-overlap
branch
from
5d0e0aa to
96b7a38
Compare
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.
The
div.svg-containerelements wrapping the Plotly SVG charts was gettingheight: 100%;set under certain viewport widths (instead of the fixed height set under other viewport widths), which led to the charts overlapping each other and other content. By fixing the height of div above that one, we can keep the chart dimensions consistent.Made the charts slightly smaller on phone-sized viewports since they didn't seem to need to be quite as tall in that case.
Updated browserslist DB
Closes #116