fix(forMedia): gap in breakpoints

Author: stringparser

components/button/Button.tsx

@@ -13,9 +13,7 @@ const styles = {
     padding: 1rem;
     font-size: 0.85rem;
 
-    ${forMedia('tablet', `
-      max-width: 320px;
-    `)}
+    ${forMedia('tablet', `max-width: 320px;`)}
   `,
 };
 

components/mixins.ts

@@ -60,9 +60,9 @@ export const gutter = (n: number = 1) => `
 `;
 
 const mqForMedia = (media: Media) => (
-  media === 'phone'
-    ? `(max-width: ${breakpoints[media]})`
-    : `(min-width: ${breakpoints[media]})`
+  media === 'phone' && `(max-width: ${breakpoints.phone})` ||
+  media === 'tablet' && `(min-width: ${breakpoints.phone})` ||
+  `(min-width: ${breakpoints[media]})`
 );
 
 export const forMedia = (media: Media, css: string) => `

pages/index.tsx

@@ -28,14 +28,16 @@ export const twoColumnSectionStyles = [
       flex: 1;
     }
 
+    margin: 0 auto;
+    max-width: ${breakpoints.phone};
+
   `,
   forMedia('tablet', `
     display: flex;
     align-items: center;
     flex-direction: row;
     justify-content: center;
 
-    margin: 0 auto;
     max-width: ${breakpoints.tablet};
   `),
 ];