ai-docs: collapsible rails and responsive table pattern [minor-release]#17
Merged
Conversation
The file-tree sidebar and the right-hand TOC are both collapsible from the top bar, persisted across reloads and restored before first paint. Tables were width:100% with overflow:hidden, so a many-column table squished its columns into slivers and clipped whatever could not shrink further. They now wrap while there is room and switch to scrolling inside their own bounded container once columns hit a readable floor, without ever crossing into the TOC rail. Also fixes note callout icons riding high against the first line, and wide tables silently clipping in the PDF export.
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
Two changes to the embedded
ai-docsviewer.Collapsible rails. The file-tree sidebar and the right-hand TOC each get a toggle in the top bar. State persists in
localStorageand is restored by a small<head>script so a collapsed rail never flashes open on load. The TOC toggle hides itself on docs with fewer than 3 headings and below the 1320px breakpoint, where the rail is already hidden.Responsive tables.
.prose tablewaswidth: 100%withoverflow: hidden(there only to clip the border radius), so a many-column table squished its columns into unreadable slivers and silently clipped anything that could not shrink further.Tables are now wrapped at render time in a
.table-wrapscroll container. Cells carry amin-widthfloor (--table-col-min: 7rem) plusoverflow-wrap: anywhere, so the table wraps its text while there is room and stops squishing at the floor, at which point the wrapper scrolls horizontally inside its own bounded box. Authors keep writing a plain<table>.Also fixed along the way:
.colneededmin-width: 0, or a table inside.cols-2forced the grid wider and ran under the TOC rail.loadDocs()fired.click()without awaiting it, so the scroll-to-top landed after the scroll-position restore.Verification
Headless measurements across 1200 / 1400 / 1600 / 1920px and all four collapse states:
.table-wrapafter live reloadvisibility: hiddengo build ./...andgo test ./...pass.Implemented via a workflow: recon, implement, then a 4-lens verify panel (layout / tables / regressions / discipline) with each finding put through an adversarial refutation pass. 4 of the raised findings survived and were fixed; the
.coloverflow and the live-reload race came out of that pass.Notes
Two judgment calls worth a look:
7remcolumn floor is uniform, so a column of short values reserves as much width as a prose column and wide tables tip into scrolling slightly earlier than strictly necessary. Tunable in one place..content-wrapkeeps itsmax-width: 1380px, so above ~1920px collapsing the sidebar re-centers rather than widening. Left as-is since it is existing typography intent.🤖 Generated with Claude Code