Add min-width to Page contents #1591
Conversation
This PR fixes a bug where blog posts that contained lengthy code samples were breaking layout. The bug wasn't actually caused by the code samples, which have the proper `overflow:auto` property set. Instead, this is caused by an oddity of Grid layouts, where the Grid items by default have `min-width:auto`, which can prevent them from reducing width the way you might expect. The fix is to tell the Grid layout that the minimum width for Grid items is 0, and then it will shrink the way you'd expect. @see https://ishadeed.com/article/min-content-size-css-grid/ Fixes #1532
|
|
✔️ Deploy Preview for cloudfour-patterns ready! 🔨 Explore the source changes: 86b1791 🔍 Inspect the deploy log: https://app.netlify.com/sites/cloudfour-patterns/deploys/61981ac6b7631d0007099cde 😎 Browse the preview: https://deploy-preview-1591--cloudfour-patterns.netlify.app |
src/objects/page/page.scss
Outdated
| min-width: 0; // 1 | ||
| } | ||
|
|
||
| .o-page__footer { | ||
| grid-row: 2; | ||
| min-width: 0; // 1 |
There was a problem hiding this comment.
Out of curiosity, would setting grid-template-columns: minmax(0, 1fr); on the o-page element have the same effect as setting min-width: 0 on the child elements?
There was a problem hiding this comment.
FWIW, I tried out @tylersticka's suggestion in the browser via DevTools and it seems to work. I'm am going to read the article to better understand why. 📖 🔍 👀
There was a problem hiding this comment.
Okay, I'm convinced in that we should explore grid-template-columns: minmax(0, 1fr); as @tylersticka suggested! 🙂
This article helped explain a bit more for me (linked in the original shared article): https://css-tricks.com/preventing-a-grid-blowout/
Overview
This PR fixes a bug where blog posts that contained lengthy code samples were breaking layout. The bug wasn't actually caused by the code samples, which have the proper
overflow:autoproperty set. Instead, this is caused by an oddity of Grid layouts, where the Grid items by default havemin-width:auto, which can prevent them from reducing width the way you might expect. The fix is to tell the Grid layout the minimum width for Grid items, and then it will shrink the way you'd expect.Learn more: https://css-tricks.com/you-want-minmax10px-1fr-not-1fr/
Testing
Unfortunately, the bug was not visible in the pattern library, because we weren't applying the Page object to the Single Article prototype. This PR applies that change so we can test the fix.
grid-template-columnsrule on.o-page.grid-template-columnsrule.