-
-
Notifications
You must be signed in to change notification settings - Fork 31.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[docs] Reduce likelyhood of overflow in ToC #20961
Conversation
Details of bundle changes.Comparing: 23f984e...ab34d2b Details of page changes
|
@@ -36,16 +36,17 @@ const useStyles = makeStyles((theme) => ({ | |||
}, | |||
item: { | |||
fontSize: 13, | |||
padding: theme.spacing(0.5, 0, 0.5, 1), |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What about restoring this style? There is an issue with the vertical spacing between the items. There isn't enough space to read/scan each item individually and understand how the text is grouped when it wraps.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If we're interested in readability I went with line-height and also used rem
instead of a fixed size. Before we couldn't scale the readability.
Especially function signatures are very likely to cause overflow since they can include two words that aren't breakable:
functionNameIsTheFirst(andTheFirstArgIsTheSecondName
. We now add a zero-width space after an opening paren that is from a function signature (i.e. a word that is followed by an opening paren).This also aligns the ToC to the grid by using theme.spacing(1) instead of 1.5.
Before: https://material-ui.netlify.app/customization/theming/#theming
After: https://deploy-preview-20961--material-ui.netlify.app/customization/theming/#theming