From dccfd355258496f8fcbe7aaf721fc54661a332e9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= <mail@sergioramos.me>
Date: Fri, 13 Oct 2017 21:02:11 +0100
Subject: [PATCH] feat(my-joy-beta): improve metadata/tags whitespace

---
 .../src/components/instances/key-value.js     | 21 ++++++++-----------
 1 file changed, 9 insertions(+), 12 deletions(-)

diff --git a/packages/my-joy-beta/src/components/instances/key-value.js b/packages/my-joy-beta/src/components/instances/key-value.js
index e2699259..34be1a3e 100644
--- a/packages/my-joy-beta/src/components/instances/key-value.js
+++ b/packages/my-joy-beta/src/components/instances/key-value.js
@@ -12,7 +12,7 @@ import {
   Editor
 } from 'joyent-ui-toolkit';
 
-const { SmallOnly, Small } = QueryBreakpoints;
+const { SmallOnly } = QueryBreakpoints;
 
 const TextareaKeyValue = ({
   name,
@@ -24,12 +24,12 @@ const TextareaKeyValue = ({
 }) => (
   <form onSubmit={handleSubmit}>
     <Row>
-      <Col xs={12} sm={10}>
+      <Col xs={8} sm={10}>
         <FormGroup name={formName} reduxForm>
           <Input fluid mono marginless />
         </FormGroup>
       </Col>
-      <Col xs={6} sm={1}>
+      <Col xs={2} sm={1}>
         <Button
           type="button"
           onClick={() => onRemove(name)}
@@ -37,12 +37,13 @@ const TextareaKeyValue = ({
           small
           icon
           fluid
+          marginless
         >
           <BinIcon />
         </Button>
       </Col>
-      <Col xs={6} sm={1}>
-        <Button type="submit" secondary small icon fluid>
+      <Col xs={2} sm={1}>
+        <Button type="submit" secondary small icon fluid marginless>
           S
         </Button>
       </Col>
@@ -51,12 +52,7 @@ const TextareaKeyValue = ({
           <Field name={formValue} component={Editor} mode="sh" />
         </FormGroup>
       </Col>
-      <SmallOnly>
-        <Divider height="4" width="100%" transparent />
-      </SmallOnly>
-      <Small>
-        <Divider height="2" width="100%" transparent />
-      </Small>
+      <Divider height="4" width="100%" transparent />
     </Row>
   </form>
 );
@@ -89,12 +85,13 @@ const InputKeyValue = ({
           small
           icon
           fluid
+          marginless
         >
           <BinIcon />
         </Button>
       </Col>
       <Col xs={6} sm={1}>
-        <Button type="submit" secondary small icon fluid>
+        <Button type="submit" secondary small icon fluid marginless>
           S
         </Button>
       </Col>