Merge pull request #398 from dcos-labs/mp/fix/gridlist-cell-overflow

fix: prevent gridlist cell content from overflowing
d2iq · Aug 29, 2019 · 5c20ec1 · 5c20ec1
2 parents b4a2118 + c1dfb01
commit 5c20ec1
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git a/packages/styleUtils/layout/gridList/style.ts b/packages/styleUtils/layout/gridList/style.ts
@@ -7,7 +7,9 @@ export const gridColumnTemplate = columnCount => {
           acc[breakpoint] = `repeat(${columnCount[breakpoint]}, 1fr)`;
           return acc;
         }, {})
-      : `repeat(${columnCount}, 1fr)`;
+      : `repeat(${columnCount}, minmax(0, 1fr))`;
+  // 👆explicitly setting the min to 0 so content doesn't overflow the grid cell
+  // see: https://github.com/rachelandrew/cssgrid-ama/issues/25
 
   return getResponsiveStyle("grid-template-columns", gridTemplateColumns);
 };
diff --git a/packages/styleUtils/layout/gridList/tests/__snapshots__/GridList.test.tsx.snap b/packages/styleUtils/layout/gridList/tests/__snapshots__/GridList.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`GridList renders default 1`] = `
 .emotion-0 {
   display: grid;
   grid-gap: 16px;
-  grid-template-columns: repeat(2,1fr);
+  grid-template-columns: repeat(2,minmax(0,1fr));
   list-style: none;
   margin-left: 0;
   margin-top: 0;
@@ -29,7 +29,7 @@ exports[`GridList renders with all props 1`] = `
 .emotion-0 {
   display: grid;
   grid-gap: 24px;
-  grid-template-columns: repeat(2,1fr);
+  grid-template-columns: repeat(2,minmax(0,1fr));
   list-style: none;
   margin-left: 0;
   margin-top: 0;