Improve wide-table display on desktop and mobile - #3497
Open
anegg0 wants to merge 2 commits into
Open
Conversation
Wide reference tables (precompile methods, chain-info address and RPC matrices) never fit a phone and crowd the desktop column. Rather than widen the page globally, which trades prose measure and the table of contents for table width on every doc, make wide tables usable at the natural column width. - Add _tables.scss: horizontal scroll and a sticky first column on desktop, and a card-stack layout on phones where each row becomes a labelled card. Scoped to .stacked-table so plain tables are untouched. - Wrap tables in a scroll container via MDXComponents. - Merge the redundant Solidity interface and Go implementation columns of the generated precompile tables into one Source cell, freeing width for the description. Regenerate all 16 partials. - Add rehype-table-labels to stamp data-label and stacked-table onto markdown tables wider than two columns, so the chain-info tables card-stack on mobile. Covered by a colocated test.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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.
Description
Make wide reference tables usable on desktop and mobile without widening the page globally (which trades prose measure and the table of contents for table width on every doc).
.stacked-tableso plain tables are untouched.Sourcecell, freeing width for the description. Regenerated all 16 partials.rehype-table-labelsplugin stampsdata-label/stacked-tableonto markdown tables wider than two columns, so the chain-info tables (including the 8-column RPC table) card-stack on mobile. Colocated test.Document type
Checklist
yarn startoryarn buildAdditional Notes
Supersedes the global-width approach (branch
arbchain-intro-formatting, #3495); that surgery is reverted here.