Fixes for layout and pre styles - #45
Conversation
GitHub Actions
Inactive
There was a problem hiding this comment.
Pull Request Overview
This PR addresses unintended horizontal scrolling in the article layout and prevents global pre styles from affecting other code previews.
- Scoped global
prestyles under.nextra-codeto contain styling to Nextra code blocks. - Removed
right: 0from the Table of Contents CSS to adjust its positioning. - Refactored
.Articleto use CSS Grid with responsivegrid-template-areasand columns, and added overflow control to the main content area.
Reviewed Changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| packages/theme/css/global.css | Scoped pre styles under .nextra-code with an explanatory comment. |
| packages/theme/components/layout/table-of-contents/TableOfContents.module.css | Removed right: 0; from the TOC container to change its anchoring. |
| packages/theme/components/layout/article/Article.module.css | Switched to CSS Grid for .Article, added responsive grid areas/columns, and set overflow rules on .main. |
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
GitHub Actions
Inactive
GitHub Actions
Inactive
| } | ||
|
|
||
| @media screen and (max-width: 48rem) { | ||
| @media screen and (max-width: 1023px) { |
There was a problem hiding this comment.
In hindsight it's pretty odd that we don't have an equivalent size for this in Primer Brand 🤔
Guessing you can't use 64rem here Dani? Would convert to 1024px. Or 63.938rem to at least be consistent in using rem (converts to 1023px)
There was a problem hiding this comment.
I'm happy to go with either option. We previously used 1023px a few lines below, and I found it clearer than using a float rem like 63.938rem. Let me know what you prefer, and I can make the update.
There was a problem hiding this comment.
Yeah i know what you mean. Let's keep as-is for now if we're already using it. Maybe let's separately chat about introducing a breakpoint in PB for either 1023px or 1024px?
rezrah
left a comment
rezrah
left a comment
There was a problem hiding this comment.
Works great 🙌 just a nit about px values in the breakpoint
.Articlegrid layout to prevent horizontal scrolling.screenshot-3snUjdFA-000263.mp4
prestyles tonextra-codeto stop styles from leaking into ReactCodeBlock previews. Closes [Next docs] Exclude default pre styling from React code previews brand#1058