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