Table of Contents active link indicator accent border collides into text with 0px padding #62

Website baseline: ac81655f4ac3aa1250023a3a9a5e3a93c00ac059 (website branch), checked locally on 2026-10-28.

Observed behavior

In src/components/layout/TableOfContents.tsx, level 2 headings default to paddingLeft: "0":

paddingLeft: item.level === 3 ? "1rem" : "0",

The active link padding adjustment was left commented out:

// paddingLeft: active ? "calc(0.5rem + 2px)" : "0.5rem",

When a level 2 TOC link becomes active via scroll observation, the style applies borderLeft: "2px solid var(--color-accent)" and marginLeft: "-2px", but leaves paddingLeft: "0".

Because horizontal padding is 0px, the 2px accent border line renders directly flush against the initial letter of the heading text without any horizontal separation, creating visual text collision.

Reproduction

1. Open /docs/installation/.
2. Scroll down until the "Cloning the Upstream Repository" section is in view and its TOC link becomes active.
3. Inspect the active TOC link in the "On this page" sidebar.
4. Observe that the orange border directly abuts the first letter "C" with computed padding-left: 0px.

Expected behavior

Apply horizontal padding to active TOC links (e.g. paddingLeft: item.level === 3 ? "1rem" : "0.5rem" or uncommenting the dynamic active padding rule) so there is clear, readable breathing room between the accent bar and the text.

Marked screenshot

Red boxes, numbered callouts and AUDIT ANNOTATION panels were added temporarily in the browser to identify the observation/request. They are not implemented website features. Capture notes.

Source

• src/components/layout/TableOfContents.tsx:72
• src/components/layout/TableOfContents.tsx:79

Scope and disclosure

Issue report only; no PR or website code changes. AI assistance: Google Antigravity (Gemini); browser investigation via Playwright, evidence annotations and report drafting. Checks were executed locally; payload examples remained inert text; no target testing was performed.