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

Đang mở Phù hợp với người mới
  • Có gì không ổn?
#8,420 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
2/5
Thời gian dự kiến
1-3 giờ
Mức phù hợp với người mới
72/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
css, javascript
Lĩnh vực
frontend

Hướng nghiên cứu

Payload không nêu tên tệp nào, vì vậy hãy bắt đầu bằng cách tìm thành phần Table of Contents (TOC) và các kiểu CSS của nó trong bố cục bài viết Handbook, sau đó chạy trang web cục bộ tại localhost:8001. Mở chế độ responsive của DevTools ở 375 × 812, mở rộng TOC và kiểm tra liên kết “GitHub Organization Membership” để xem nó tràn ra khỏi container ở đâu. Hoàn thành khi các liên kết TOC dài xuống dòng bên trong container ở kích thước khung nhìn này và không có văn bản nào bị cắt.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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
Ngôn ngữ chính
JavaScript
Star
1.2k
Fork
1.7k
Merge trung bình
2 ngày 22 giờ
Pull request đã merge (30 ngày)
69

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của layer5io/layer5

Tất cả issue của layer5io/layer5

Issue tương tự

Thêm issue về JavaScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.