[UI] Typography token Heading 1 overflows on mobile viewports

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

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

@tanav29 đang làm issue này rồi.

Từ ngày 10/11/2026.

  • #8280 của @AP24110011695 — đang mở
  • #8364 của @tanav29 — đang mở

Đá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
70/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
design, frontend

Hướng nghiên cứu

Trang bị ảnh hưởng là tài liệu Sistent Design Tokens (Getting Started → Design Tokens), vì vậy hãy bắt đầu bằng việc xác định phần token kiểu chữ và component xem trước Heading 1 hiển thị phần đó, rồi đọc các quy tắc về chiều rộng và cỡ chữ được áp dụng ở đó. Tái hiện ở 414px và 360px trong chế độ responsive design, sau đó điều chỉnh cỡ chữ responsive hoặc các ràng buộc chiều rộng để Heading 1 vẫn nằm trên một dòng. Hoàn tất nghĩa là không bị cắt ngang ở 360px và hệ thống phân cấp kiểu chữ vẫn đọc đúng ở các chiều rộng desktop.

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

The Heading 1 typography preview in the Sistent Design Tokens documentation does not adapt properly to smaller mobile viewports.

At narrower screen widths, the heading exceeds the available content width, resulting in awkward text wrapping and horizontal clipping.

Affected page: Sistent → Getting Started → Design Tokens

Steps to Reproduce
  1. Open the Sistent Design Tokens page.
  2. Open the browser's responsive design mode.
  3. Set the viewport width to approximately 414px.
  4. Scroll to the Typography Tokens section.
  5. Observe the Heading 1 typography preview.
  6. Repeat with a viewport width of approximately 360px.
Actual Behavior
  • At 414px, the Heading 1 text wraps awkwardly, separating the word "Heading" from the number "1".
  • At 360px, the heading extends beyond the available content width and gets clipped.
  • The typography preview does not scale or adapt appropriately to smaller screens.
Expected Behavior

The typography preview should adapt to smaller viewport widths without causing horizontal overflow or clipping.

Heading samples should remain fully visible and maintain an appropriate responsive layout while preserving the intended typography hierarchy.

Environment
  • Page: Sistent Design Tokens — Typography
  • Viewports: 414 × 846 and 360 × 760 pixels
  • Browser: Firefox
  • Issue type: UI / Responsive Design
Suggested Investigation

Inspect the responsive styles and width constraints applied to typography preview components, particularly the Heading 1 sample.

Consider using responsive font sizing or appropriate width constraints to ensure typography samples remain readable on smaller screens.

Evidence

Attached screenshots demonstrate the issue at two different mobile viewport widths.

Contribution

Anyone can work on this...

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