[UI] Handbook Table of Contents links are clipped on mobile viewports

Open Beginner friendly
  • Is something wrong?
#8,420 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
72/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
css, javascript
Domain
frontend

Research direction

The payload names no file, so start by finding the Table of Contents component and its styles in the Handbook article layout, then run the site locally on localhost:8001. Open DevTools responsive mode at 375 × 812, expand the TOC, and inspect the "GitHub Organization Membership" link to see where it overflows its container. Done when long TOC links wrap inside the container at that viewport with no clipped text.

Written by the indexing model from the issue text.

Description

framework/gatsby help wanted kind/bug
Description

On the [Layer5 Community Handbook](https://layer5.io/community/handbook/code-of-conduct), longer Table of Contents (TOC) links are clipped on mobile viewports.

At a screen resolution of 375 × 812px, the "GitHub Organization Membership" link extends beyond the visible container, making part of the text unreadable.

This issue was observed in the local development environment with the TOC expanded.

Steps to Reproduce:

  1. Open a Community Handbook article.
  2. Switch to a mobile viewport (375 × 812px).
  3. Expand the Table of Contents.
  4. Observe that longer navigation links are cut off.
Expected Behavior

All TOC links should remain fully visible and readable across mobile screen sizes. Longer text should wrap appropriately without overflowing or being clipped by its container.

Screenshots

Screenshot attached showing the clipped "GitHub Organization Membership" link at 375 × 812px.

Environment:
  • Host OS: macOS
  • Browser: Brave (DevTools responsive mode)
  • Viewport: 375 × 812px
  • Environment: Local development (localhost:8001)
Screenshot 2026-11-14 at 5 32 58 PM
Dominant language
JavaScript
Stars
1.2k
Forks
1.7k
Avg merge
2d 22h
Merged PRs (30d)
69

Getting set up

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.

More from layer5io/layer5

All issues in layer5io/layer5

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.