zaproxy / zaproxy/zap-api-docs
Broken mobile layout and hidden nav make page difficult to use
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 40
- Forks
- 32
- PR merge metrics
- No merged PRs in 30d
Description
Summary
The mobile version of the api docs page is in a very poor usability state because the current page overflow hides the Table of Contents nav menu, and since this page is extremely long, the TOC is a critical tool users can't afford to navigate without. If the user zooms out to see the full page overflow on mobile, they can technically see the nav menu button to reveal the TOC in the sidebar, but zooming out makes everything on the page too small to read.
The cause of the page overflow are long H2 function strings that don't fit inside the normal page width and don't have wrap down behaviors. There are many function strings that exceed the page width but the worst offender is currently sessionManagementViewGetSessionManagementMethodConfigParams.
The simplest solution is a one-line CSS fix to add wrap down behaviors to H's so instead of overflowing and breaking the layout, the text will wrap down and continue on the next line. Then the problem is solved, no page overflow and the nav TOC will behave normally.
The fix is covered by PR #241.
Reproduction
On any mobile device and any browser go to zaproxy.org/docs/api, notice that the nav menu icon in the upper left corner isn't visible. Zoom out to reveal whitespace covering the other half of the page and the nav menu icon should now be visible, but the rest of the text on the page should uncomfortably small to read.
Screenshots
Default zoom
Notice no nav menu icon on the upper left corner and a long H2 string that gets cut off on the right page margin sessionManagementViewGetSesssion...
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
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Open the API documentation page at zaproxy.org/docs/api on a mobile viewport and inspect the styling for long H2 function names, especially sessionManagementViewGetSessionManagementMethodConfigParams. Verify the result at normal zoom: headings wrap within the page, the layout no longer overflows, and the table-of-contents menu remains visible.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- documentation
- Issue type
- Bug
- Difficulty
- 1/5
- Estimated time
- Under an hour
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 30/100