[Layout component] Avoid resizing main while loading (#1818)

* avoid resizing `main` while loading * Update layout.scss * Create stale-pugs-eat.md Co-authored-by: Jon Rohan <yes@jonrohan.codes>
primer · Dec 9, 2021 · 22c29e7 · 22c29e7
1 parent 929ba56
commit 22c29e7
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/.changeset/stale-pugs-eat.md b/.changeset/stale-pugs-eat.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+[Layout component] Avoid resizing `main` while loading
diff --git a/src/layout/layout.scss b/src/layout/layout.scss
@@ -25,7 +25,7 @@
   // Flow as column
 
   grid-auto-flow: column;
-  grid-template-columns: auto 0 1fr; // sidebar column, separator, main column
+  grid-template-columns: auto 0 minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))); // sidebar column, separator, main column
   grid-gap: var(--Layout-gutter);
 
   .Layout-sidebar {
@@ -101,7 +101,7 @@
   }
 
   &.Layout--sidebarPosition-end {
-    grid-template-columns: 1fr 0 auto;
+    grid-template-columns: minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))) 0 auto;
 
     .Layout-main {
       grid-column: 1;