Fix mobile horizontal overflow that hides TOC toggle #241
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.
Summary
This fix ensures the long H2 function strings wrap down to prevent them from breaking the page layout via horizontal overflow and hiding the nav menu / TOC toggle button.
H1 and H3's are included proactively so they won't break the page the same way if ones with long strings are ever added in the future. Some bottom margin space is also added to the
.highlightcode block on mobile only so it's no longer directly touching the text underneath it (not applied on higher breakpoints since code blocks are separated to the side of the page).Closes #240
Testing
You can test the fix out on this demo site zaproxy-api.ritovision.com or on a local build.
On any mobile device and any browser, visit the page and the nav menu should appear as normal and there should be no excess whitespace on the right side or the ability to zoom out or pan around. Long function string text should be wrapping down to the next line.
I have tested the fix and confirmed it stable on Chrome, Edge, Firefox mobile browsers, and Chrome desktop.
Before and After Screenshots
Before - Default zoom
Notice no nav menu icon on the upper left corner, a long H2 string that gets cut off on the right page margin
sessionManagementViewGetSession...and the grey outlined text underneath the.highlightcode block directly touching itBefore - Zoomed out
Notice a tiny nav menu icon in the top left corner, whitespace covering the right half of the page and tiny text content everywhere
After
Notice the long function text wrapping down, the nav menu button clearly visible in the top left corner, and the text underneath the code block has some space between them.