From 942553bab5a561acba22f17a6cb6c1f2b794ce1f Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Mon, 19 Nov 2018 00:45:46 +0100
Subject: [PATCH] layout tweak

---
 src/components/Post/PostActions.jsx               | 2 +-
 src/components/Post/PostActions.module.scss       | 7 ++++++-
 src/components/molecules/RelatedPosts.module.scss | 4 ++++
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/components/Post/PostActions.jsx b/src/components/Post/PostActions.jsx
index 10422f40..e83ddbe9 100644
--- a/src/components/Post/PostActions.jsx
+++ b/src/components/Post/PostActions.jsx
@@ -24,7 +24,7 @@ const ActionTwitter = ({ url, slug }) => (
     <Twitter />
     <ActionContent
       title="Have a comment?"
-      text="Hit me up on Twitter"
+      text="Hit me up"
       textLink="@kremalicious"
     />
   </a>
diff --git a/src/components/Post/PostActions.module.scss b/src/components/Post/PostActions.module.scss
index ef00073f..e4c74a3f 100644
--- a/src/components/Post/PostActions.module.scss
+++ b/src/components/Post/PostActions.module.scss
@@ -13,6 +13,12 @@
     flex-wrap: wrap;
     justify-content: space-between;
 
+    @media (min-width: $screen-md) {
+        margin-left: -100%;
+        margin-right: -18%;
+        padding-left: 80%;
+    }
+
     > div {
         flex: 0 0 100%;
         border-bottom: 1px dashed rgba($brand-grey-light, .3);
@@ -62,7 +68,6 @@
     padding-right: $spacer;
     position: relative;
     text-align: left;
-    height: 100%;
 
     &:hover,
     &:focus {
diff --git a/src/components/molecules/RelatedPosts.module.scss b/src/components/molecules/RelatedPosts.module.scss
index a22c8198..bac23abc 100644
--- a/src/components/molecules/RelatedPosts.module.scss
+++ b/src/components/molecules/RelatedPosts.module.scss
@@ -5,6 +5,10 @@
     margin-top: -($spacer * 2);
     margin-bottom: $spacer;
 
+    @media (min-width: $screen-md) {
+        @include breakoutviewport;
+    }
+
     ul {
         display: flex;
         flex-wrap: wrap;