---

id: d4ad245c-be33-43a5-a080-af3cdb89c9b4 title: 'responsive: nav clipped at 768–1099; separator dots wrap onto line starts' state: closed labels:

• ui assignees: [] milestone: null created: 2026-10-27T17:24:52.516630583Z updated: 2026-10-27T17:45:41.782101636Z

---

What

• At 768–1099 px the one-row nav is horizontally scrollable but has no fade/affordance; at 768 px the last items are clipped mid-word (“… releases · w”) in screenshots.
• Below 768 px the wrap works, but literal · separators stay outside the links: a line can end with · and the next starts with · agents at 320/390.

Reproduced

Screenshots at 320/390/768: wrapped nav has leading/trailing bullets; 768 shows clipped tabs.

Impact

Navigation looks broken at the tablet breakpoint; separators look like stray punctuation on phones.

Fix

• Render separators as <span class="nav-sep" aria-hidden="true">·</span> and hide them below 768 (use flex column-gap).
• Add a fade or wrap until the nav fits (or move the wrap breakpoint to ~1024); assert 320/390/768 all reach every tab visibly without mid-word clipping.
• Keep 40px targets and aria-current.