From f388e52549c02e9c141b5f1f2f8b5c22f8b7a81f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A1bio=20Moreira?=
 <fabiommmoreira@shobus-MBP.localdomain>
Date: Mon, 14 May 2018 14:24:55 +0100
Subject: [PATCH] fix(ui-toolkit): add margin to playground tab headers

---
 .../ui-toolkit/src/styleguide/playground.js   | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/packages/ui-toolkit/src/styleguide/playground.js b/packages/ui-toolkit/src/styleguide/playground.js
index cfab188a..45fff648 100644
--- a/packages/ui-toolkit/src/styleguide/playground.js
+++ b/packages/ui-toolkit/src/styleguide/playground.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import styled from 'styled-components';
 import is from 'styled-is';
 import remcalc from 'remcalc';
+import { Margin } from 'styled-components-spacing';
 
 const Wrapper = styled.section``;
 
@@ -124,14 +125,16 @@ class Playground extends Component {
     return (
       <Wrapper>
         <Tabs>
-          <TabHeader active={tab === 'component'}>
-            <Button
-              active={tab === 'component'}
-              onClick={() => this.changeTab('component')}
-            >
-              {(propCode.split(nameRegex)[1] || 'Component').split(/\s/g)[0]}
-            </Button>
-          </TabHeader>
+          <Margin right={5}>
+            <TabHeader active={tab === 'component'}>
+              <Button
+                active={tab === 'component'}
+                onClick={() => this.changeTab('component')}
+              >
+                {(propCode.split(nameRegex)[1] || 'Component').split(/\s/g)[0]}
+              </Button>
+            </TabHeader>
+          </Margin>
           {states.length
             ? states.map((state, i) => (
                 <TabHeader active={tab === state} key={`tabHeader${i}`}>