From 0c298b7be43998bcd10bcd323920c846ae5693cb Mon Sep 17 00:00:00 2001
From: Ezekiel Aquino <ezekiel@bakkenbaeck.no>
Date: Mon, 17 Dec 2018 11:48:32 +0100
Subject: Fixes mobile button layout for Definition component

---
 packages/website/ts/@next/components/button.tsx     |  1 +
 packages/website/ts/@next/components/definition.tsx | 17 ++++++++++++++---
 2 files changed, 15 insertions(+), 3 deletions(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx
index 05afa3534..ab804b758 100644
--- a/packages/website/ts/@next/components/button.tsx
+++ b/packages/website/ts/@next/components/button.tsx
@@ -62,6 +62,7 @@ const ButtonBase = styled.button<ButtonInterface>`
     border-color: ${props => (props.isTransparent && !props.isWithArrow) && 'rgba(255, 255, 255, .4)'};
     color: ${props => props.isAccentColor ? props.theme.linkColor : (props.color || props.theme.textColor)};
     padding: ${props => (!props.isNoPadding && !props.isWithArrow) && '18px 30px'};
+    white-space: ${props => props.isWithArrow && 'nowrap'};
     text-align: center;
     font-size: ${props => props.isWithArrow ? '20px' : '18px'};
     text-decoration: none;
diff --git a/packages/website/ts/@next/components/definition.tsx b/packages/website/ts/@next/components/definition.tsx
index d556bc647..77f837294 100644
--- a/packages/website/ts/@next/components/definition.tsx
+++ b/packages/website/ts/@next/components/definition.tsx
@@ -116,10 +116,21 @@ const TextWrap = styled.div<Props>`
 `;
 
 const LinkWrap = styled.div`
-    display: inline-flex;
     margin-top: 60px;
 
-    a + a {
-        margin-left: 60px;
+    @media (min-width: 768px) {
+        display: inline-flex;
+
+        a + a {
+            margin-left: 60px;
+        }
+    }
+
+    @media (max-width: 768px) {
+        max-width: 250px;
+
+        a + a {
+            margin-top: 15px;
+        }
     }
 `;
-- 
cgit v1.2.3