[UI] Typography token Heading 1 overflows on mobile viewports

Open Beginner friendly
  • Is something wrong?
#8,267 4 comments 0 reactions 1 assignee View on GitHub

Maintainers usually reply within 1 day

@tanav29 is already working on this.

Since Nov 10, 2026.

  • #8280 by @AP24110011695 — open
  • #8364 by @tanav29 — open

Assessment

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

Research direction

The affected page is the Sistent Design Tokens documentation (Getting Started → Design Tokens), so start by locating the typography tokens section and the Heading 1 preview component that renders it, and read the width and font-size rules applied there. Reproduce at 414px and 360px in responsive design mode, then adjust responsive font sizing or width constraints so Heading 1 stays on one line. Done means no horizontal clipping at 360px and the typography hierarchy still reads correctly at desktop widths.

Written by the indexing model from the issue text.

Description

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