Uh oh!
There was an error while loading. Please reload this page.
Let design token tables size their own columns - #2424
Merged
Conversation
The nine token pages all set `width: 10%` on the first column. A table cell cannot normally shrink below its min-content width, so a long token name would just widen the column -- but `base/typography` sets `overflow-wrap: anywhere` on `body`, which drops min-content to a single character. The 10% then becomes achievable and the browser honours it, so `size.$font-heading-n2-max` renders as four fragments broken mid-word while the Comment column keeps 696px it often leaves empty. Removing the widths lets the table size its columns to content: on the Size page the Name column goes from 100px to 262px, nearly every name fits on one line, and the table is less than half as tall. Checked all nine pages at 1100px and 420px -- no horizontal overflow at either.
|
✅ Deploy Preview for cloudfour-patterns ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
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 freeto 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.
Overview
All nine design token pages pin their first column with
<th style={{ width: '10%' }}>, and on the wider tables that produces genuinely broken output rather than merely tight columns. On the Size page the Name column is held at 100px, sosize.$font-heading-n2-maxrenders as four fragments broken mid-word, while the Comment column takes 696px that most rows leave empty. The table ends up more than twice as tall as it needs to be.Worth knowing why a percentage does that at all, because it is not the usual behaviour: a table cell cannot normally shrink below its min-content width, so a long unbroken token name should just widen the column and override the 10%. What defeats that is
base/typographysettingoverflow-wrap: anywhereonbody— that drops min-content to a single character, which makes 10% achievable, so the browser honours it literally. Both rules are reasonable on their own.This removes the widths and lets the table size columns to their content. There is nothing to replace them with; the browser's automatic layout is the behaviour we want.
Screenshots
Testing
The Size page is the clearest case, since it has the longest token names.
size.$fo/nt-/heading-/n2-max.