Starting the test phase 🚀

Author: chicio

src/components/design-system/atoms/container-fullscreen.tsx

@@ -6,6 +6,7 @@ export const ContainerFullscreen = styled.div`
   align-items: center;
   flex-direction: column;
   height: 100vh;
+  min-height: 100vh;
   width: 100%;
   background-color: ${(props) => props.theme.light.primaryColor};
 

src/components/design-system/molecules/post-card.tsx

@@ -53,6 +53,10 @@ const PostCardLink = styled(StandardInternalLink)`
   }
 `;
 
+const PostCardTitle = styled(Heading5)`
+  word-wrap: break-word;
+`;
+
 interface PostCardProps {
   slug: string;
   title: string;
@@ -85,7 +89,7 @@ export const PostCard: React.FC<PostCardProps> = ({
         );
       }}
     >
-      <Heading5>{title}</Heading5>
+      <PostCardTitle>{title}</PostCardTitle>
       <PostCardImageContainer>
         <GatsbyImage
           alt={title}

src/components/design-system/organism/menu.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 import { track, tracking } from "../../../utils/tracking";
 import { MenuItem } from "../molecules/menu-item";
-import { Container } from "../atoms/container";
 import styled, { css } from "styled-components";
+import { Container } from "../atoms/container";
 
 const MenuContainer = styled.div`
   background-color: ${(props) => props.theme.light.primaryColor};

src/components/design-system/templates/blog-page.tsx

@@ -9,8 +9,9 @@ import { Footer } from "../organism/footer";
 import { WindowLocation } from "@reach/router";
 
 const BlogContainer = styled(Container)`
-  margin-top: ${(props) => props.theme.spacing[12]};
-  flex: 1 0 auto;
+  width: 90%;
+  padding: 0;
+  margin: ${(props) => props.theme.spacing[12]} auto auto;
 `;
 
 interface BlogPageProps {

src/components/post-content.tsx

@@ -8,6 +8,7 @@ import { syntax } from "./design-system/atoms/syntax";
 export const PostContentContainer = styled.div`
   color: ${(props) => props.theme.light.primaryTextColor};
   line-height: ${(props) => props.theme.lineHeight};
+  word-break: break-word;
   
   & ul li {
     font-size: ${(props) => props.theme.fontSizes[2]};