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

Aperta Adatta ai principianti
  • Qualcosa non va?
#8,420 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
72/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
css, javascript
Ambito
frontend

Direzione di ricerca

Il payload non indica alcun file, quindi inizia trovando il componente Table of Contents e i suoi stili nel layout dell’articolo dell’Handbook, poi avvia il sito in locale su localhost:8001. Apri la modalità responsive di DevTools a 375 × 812, espandi la TOC e ispeziona il link “GitHub Organization Membership” per vedere dove esce dal suo contenitore. È completato quando i link lunghi della TOC vanno a capo all’interno del contenitore a questa dimensione della viewport, senza testo tagliato.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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
Lingua principale
JavaScript
Stelle
1.2k
Fork
1.7k
Merge medio
2g 22h
PR unite (30g)
69

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di layer5io/layer5

Tutte le issue di layer5io/layer5

Issue simili

Altre issue su JavaScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.