fix(code-snippet): set max-height to 100% and add bottom padding to expanded multi-line #4915
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.
Closes #4903
The problem identified in #4903 is caused by a fixed max-height being set on the expanded multi-line code snippet. While this max-height is very large, there are situations where a code snippet may be even longer and would therefore be cut off.
This PR proposes making the max-height of an expanded multi-line code snippet 100%, so that all expanded snippets can be fully visible no matter how long they are. I don't think there's a reason to cut off this text (even with a scroll) when a user chooses to expand the snippet to see entire snippet.
I also added some bottom padding to this container because I noticed that the "Show more"/"Show less" button was overlapping the last line of code.
Changelog
New
Changed
Removed
Testing / Reviewing
To test this, I used the Cupcake Ipsum generator to create 50 long paragraph of text to place into the multi-line code snippet. I suggest using that generator (not copy + pasting text repeatedly) or a similar generator so that it's easier to tell that the component is showing ALL available text when you expand it.