fix(Grid): Set correct max size

ticketmaster · Jun 14, 2018 · 58a2698 · 58a2698
1 parent 944e107
commit 58a2698
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 5 deletions.
diff --git a/src/components/Gradient.js b/src/components/Gradient.js
@@ -5,6 +5,7 @@ import colors from "../theme/colors";
 import { mediumAndUp, largeAndUp } from "../theme/mediaQueries";
 
 const Gradient = styled.span`
+  z-index: 1;
   background-image: ${props =>
     `linear-gradient(${props.deg.small}, ${props.from}, ${props.to})`};
   ${mediumAndUp`
@@ -16,6 +17,8 @@ const Gradient = styled.span`
   `};
 
   &.gradient--overlay:after {
+    z-index: 2;
+    height: 100%;
     content: "";
     opacity: 0.4;
     top: 0;

diff --git a/src/components/Grid/Container.js b/src/components/Grid/Container.js
@@ -4,7 +4,7 @@ import spacing from "../../theme/spacing";
 
 const Container = styled.div`
   margin: 0 auto;
-  max-width: 1440px;
+  max-width: 1248px;
   width: 100%;
   padding-left: ${spacing.gutters.small}px;
   padding-right: ${spacing.gutters.small}px;

diff --git a/src/components/Grid/__tests__/__snapshots__/index.spec.js.snap b/src/components/Grid/__tests__/__snapshots__/index.spec.js.snap
@@ -3,7 +3,7 @@
 exports[`Grid renders medium and up when medium size defined 1`] = `
 .c0 {
   margin: 0 auto;
-  max-width: 1440px;
+  max-width: 1248px;
   width: 100%;
   padding-left: 16px;
   padding-right: 16px;
@@ -108,7 +108,7 @@ exports[`Grid renders medium and up when medium size defined 1`] = `
 exports[`Grid renders multiple sizes defined 1`] = `
 .c0 {
   margin: 0 auto;
-  max-width: 1440px;
+  max-width: 1248px;
   width: 100%;
   padding-left: 16px;
   padding-right: 16px;
@@ -213,7 +213,7 @@ exports[`Grid renders multiple sizes defined 1`] = `
 exports[`Grid renders small size defined 1`] = `
 .c0 {
   margin: 0 auto;
-  max-width: 1440px;
+  max-width: 1248px;
   width: 100%;
   padding-left: 16px;
   padding-right: 16px;
@@ -318,7 +318,7 @@ exports[`Grid renders small size defined 1`] = `
 exports[`Grid renders with defaults 1`] = `
 .c0 {
   margin: 0 auto;
-  max-width: 1440px;
+  max-width: 1248px;
   width: 100%;
   padding-left: 16px;
   padding-right: 16px;