Prevent content to increase main's size (#1486)

manuelpuyol · web-flow · commit f52d40cce57b · 2021-07-02T14:35:28.000Z
Based on https://css-tricks.com/preventing-a-grid-blowout/ If main's content was large enough, it would cause `main` to grow more than it should and push `sidebar` to the side, causing an horizontal scroll on pages. | Before | After | |--------|--------| | ![image](https://user-images.githubusercontent.com/11280312/124145356-56996900-da52-11eb-954d-8b6a44d85cea.png) | ![image](https://user-images.githubusercontent.com/11280312/124145395-5e590d80-da52-11eb-9024-175c2de360ad.png) |
diff --git a/.changeset/happy-ways-suffer.md b/.changeset/happy-ways-suffer.md
@@ -0,0 +1,5 @@
+---
+'@primer/css': patch
+---
+
+Prevents main content to blowout and cause an horizontal scroll
diff --git a/src/layout/layout.scss b/src/layout/layout.scss
@@ -152,6 +152,7 @@
 }
 
 .Layout-main {
+  min-width: 0;
 
   // Centered main column
   // FIXME: right-aligned sidebar

Original file line number	Diff line number	Diff line change
`@@ -152,6 +152,7 @@`
`152`	`152`	`}`
`153`	`153`
`154`	`154`	`.Layout-main {`
	`155`	`+ min-width: 0;`
`155`	`156`
`156`	`157`	`// Centered main column`
`157`	`158`	`// FIXME: right-aligned sidebar`