zaproxy / zaproxy/zap-api-docs

Broken mobile layout and hidden nav make page difficult to use

Open
#240 1 comment 0 reactions 0 assignees View on GitHub

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

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



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

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.