fix(website): docs polish 2/3 — breadcrumb, tables, rails, mdx details - #863
Merged
Conversation
…tails The detail third of the docs polish arc (findings §3, §4, §6-rail, §7, §9). - Breadcrumb typography moves to the list so the separators inherit it - they were siblings of the links and rendered 3px larger and 3px higher on the first two crumbs. Measured after: one font size, one baseline. - Tables get a 560px floor inside .docs-table-scroll so the scroller finally scrolls instead of crushing (375px rendered `agent` across three lines in a 49px column, rows 227px tall). Edge fades signal scrollability; the wrapper is tabIndex=0 role=region so keyboard users can reach the clipped columns (WCAG 2.1.1). ApiDocRenderer and ApiRefTable tables gain the same wrapper. - Inline code chips: word-break normal + overflow-wrap break-word - chips wrap whole instead of splitting @threadplane/langgraph into two pills. break-word, not anywhere: `anywhere` shrinks min-content to one character, which let table columns squeeze below chip width and wrap `agent` as agen/t (caught by measurement mid-implementation). - One horizontal rail: header, API block, and prev/next align down to the article's padding scale, ending the 8px left-edge mismatch below 640px. - Steps' dangling connector below the last step is gone (:last-child - the selector inline styles could never express). - The dead .shiki and [data-rehype-pretty-code-title] rules are deleted (findings §9: zero matching elements site-wide), with breadcrumb comments pointing at what to do if either ever comes back. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
blove
enabled auto-merge (squash)
August 30, 2026 01:39
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
Contributor
This was referenced Aug 30, 2026
blove
added a commit
that referenced
this pull request
Sep 1, 2026
PR #863 deleted the global `.shiki` rules from docs.css on the finding that zero elements matched. That was true of docs and blog — rehype-pretty-code writes its background inline and never emits a `.shiki` class — but two TSX call sites highlight with Shiki's `codeToHtml` directly, which does: - components/landing/HighlightedCode.tsx (homepage Code tabs, /langgraph, /render, /chat) - components/solutions/SolutionCodeBlock.tsx (every /solutions/* page) Those <pre> elements lost their padding. The dark theme background rides inline on the <pre>, while the landing override put its 16px 20px on the wrapper <div> (which carries `shiki` too) — outside the dark box. The result was a light gutter with the code flush against the dark edges. Restores the padding as a `pre.shiki` base rule in global.css, and moves the landing override's padding off the wrapper onto `> pre.shiki`. The selector is pre-scoped deliberately: both call sites also put the class on a wrapper div, where padding lands outside the surface. SolutionCodeBlock's comment claimed Shiki emits its own padding — that wrong premise is what made the deletion look safe, so it is corrected too. Guarded by HighlightedCode.spec.tsx, which asserts the markup that needs the rule and the rule's presence together; either half alone passes vacuously. Mutation-tested by stripping the padding declaration. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
blove
added a commit
that referenced
this pull request
Sep 1, 2026
PR #863 deleted the global `.shiki` rules from docs.css on the finding that zero elements matched. That was true of docs and blog — rehype-pretty-code writes its background inline and never emits a `.shiki` class — but two TSX call sites highlight with Shiki's `codeToHtml` directly, which does: - components/landing/HighlightedCode.tsx (homepage Code tabs, /langgraph, /render, /chat) - components/solutions/SolutionCodeBlock.tsx (every /solutions/* page) Those <pre> elements lost their padding. The dark theme background rides inline on the <pre>, while the landing override put its 16px 20px on the wrapper <div> (which carries `shiki` too) — outside the dark box. The result was a light gutter with the code flush against the dark edges. Restores the padding as a `pre.shiki` base rule in global.css, and moves the landing override's padding off the wrapper onto `> pre.shiki`. The selector is pre-scoped deliberately: both call sites also put the class on a wrapper div, where padding lands outside the surface. SolutionCodeBlock's comment claimed Shiki emits its own padding — that wrong premise is what made the deletion look safe, so it is corrected too. Guarded in two halves, since neither is sufficient alone. The CSS half is a style contract (#926's registry — this is precisely the "comment explaining why a declaration must not be removed" that it asks for), mutation-tested by deleting the declaration and by renaming the selector. The markup half lives in HighlightedCode.spec.tsx: that Shiki still emits a `pre.shiki` carrying an inline background and no padding of its own, so the contract keeps guarding a rule something actually matches. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
blove
added a commit
that referenced
this pull request
Sep 1, 2026
PR #863 deleted the global `.shiki` rules from docs.css on the finding that zero elements matched. That was true of docs and blog — rehype-pretty-code writes its background inline and never emits a `.shiki` class — but two TSX call sites highlight with Shiki's `codeToHtml` directly, which does: - components/landing/HighlightedCode.tsx (homepage Code tabs, /langgraph, /render, /chat) - components/solutions/SolutionCodeBlock.tsx (every /solutions/* page) Those <pre> elements lost their padding. The dark theme background rides inline on the <pre>, while the landing override put its 16px 20px on the wrapper <div> (which carries `shiki` too) — outside the dark box. The result was a light gutter with the code flush against the dark edges. Restores the padding as a `pre.shiki` base rule in global.css, and moves the landing override's padding off the wrapper onto `> pre.shiki`. The selector is pre-scoped deliberately: both call sites also put the class on a wrapper div, where padding lands outside the surface. SolutionCodeBlock's comment claimed Shiki emits its own padding — that wrong premise is what made the deletion look safe, so it is corrected too. Guarded in two halves, since neither is sufficient alone. The CSS half is a style contract (#926's registry — this is precisely the "comment explaining why a declaration must not be removed" that it asks for), mutation-tested by deleting the declaration and by renaming the selector. The markup half lives in HighlightedCode.spec.tsx: that Shiki still emits a `pre.shiki` carrying an inline background and no padding of its own, so the contract keeps guarding a rule something actually matches. Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
PR 2 of 3 of the docs polish arc (plan · findings) — the reading-detail fixes. Every row is a measured defect → measured fix:
agentasag/en/tin a 49px column, 227px rows, scroller with nothing to scroll (343/343)agentrenders as one line box; edge fades signal it;tabIndex=0 role=regionmakes it keyboard-reachable@threadplane/langgraphsplit into two backgrounded pillsdisplay:noneon:last-child, others untouched.shiki, code titles — zero matching elements)A trap caught mid-implementation
First attempt used
overflow-wrap: anywherefor chip wrapping — and the table'sagentchip started wrapping asagen/tdespite fitting.anywherealso shrinks min-content to one character, so table column sizing squeezed the column below the chip's width.break-wordbreaks identically at overflow but leaves min-content honest. Documented in the CSS.Gates
nx test websitefully green, 0 lint errors, prod build green. Scope is docs-only (docs.css + 4 docs components/routes) — marketing surfaces untouched by construction.PR 3 (a11y + interaction: search dialog semantics + mobile entry, tabs keyboard nav, focus rings, touch targets, reduced-motion) follows.
🤖 Generated with Claude Code