Skip to content

Conversation

@ritorhymes
Copy link

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 .highlight code 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 .highlight code block directly touching it

ZAP API docs mobile layout showing missing nav menu icon and H2 text cut off due to overflow



Before - 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

ZAP API docs mobile zoomed out showing tiny nav menu icon, large whitespace on the right, and very small page text

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.

After: ZAP API docs mobile view with headings wrapping correctly, no horizontal overflow, and the TOC/nav menu icon visible

@thc202
Copy link
Member

thc202 commented Dec 26, 2025

You need to address DCO.

@ritorhymes ritorhymes force-pushed the fix-api-mobile-layout branch from c5e3e49 to 61f4569 Compare December 26, 2025 10:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

Broken mobile layout and hidden nav make page difficult to use

2 participants