From c3417241f12ebcb3ba41b176e092f55b35fbdd12 Mon Sep 17 00:00:00 2001
From: Lukas Martinelli <me@lukasmartinelli.ch>
Date: Mon, 9 Jan 2017 22:09:15 +0100
Subject: [PATCH] Ensure zoom icon is nice

---
 src/components/fields/DocLabel.jsx      |  3 ++-
 src/components/fields/ZoomSpecField.jsx | 11 ++++++++---
 src/components/inputs/ArrayInput.jsx    |  1 +
 src/components/inputs/FontInput.jsx     | 10 +++++++++-
 4 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/components/fields/DocLabel.jsx b/src/components/fields/DocLabel.jsx
index ca87292..e700df8 100644
--- a/src/components/fields/DocLabel.jsx
+++ b/src/components/fields/DocLabel.jsx
@@ -19,8 +19,9 @@ export default class DocLabel extends React.Component {
     return <label
       style={{
         ...input.label,
-        ...this.props.style,
         position: 'relative',
+        verticalAlign: 'top',
+        ...this.props.style,
       }}
     >
       <span
diff --git a/src/components/fields/ZoomSpecField.jsx b/src/components/fields/ZoomSpecField.jsx
index ea1296e..e4f96e5 100644
--- a/src/components/fields/ZoomSpecField.jsx
+++ b/src/components/fields/ZoomSpecField.jsx
@@ -123,14 +123,15 @@ export default class ZoomSpecField extends React.Component {
           }}>
           {label}
           <Button
-            style={{backgroundColor: null}}
+            style={{backgroundColor: null, verticalAlign: 'top'}}
             onClick={this.deleteStop.bind(this, idx)}
           >
             <DeleteIcon />
           </Button>
           <NumberInput
             style={{
-              width: '7.5%'
+              width: '7.5%',
+              verticalAlign: 'top',
             }}
             value={zoomLevel}
             onChange={changedStop => this.changeStop(idx, changedStop, value)}
@@ -169,7 +170,11 @@ export default class ZoomSpecField extends React.Component {
         />
         {this.props.fieldSpec['zoom-function'] &&
         <Button
-          style={{backgroundColor: null}}
+          style={{
+            verticalAlign: 'top',
+            backgroundColor: null,
+            display: 'inline-block',
+          }}
           onClick={this.makeZoomFunction.bind(this)}
         >
           <FunctionIcon />
diff --git a/src/components/inputs/ArrayInput.jsx b/src/components/inputs/ArrayInput.jsx
index 4752405..93ca7ea 100644
--- a/src/components/inputs/ArrayInput.jsx
+++ b/src/components/inputs/ArrayInput.jsx
@@ -30,6 +30,7 @@ class ArrayInput extends React.Component {
     const commonStyle = {
       width: '48%',
       marginRight: '2%',
+      marginBottom: '2%'
     }
     const inputs = this.values.map((v, i) => {
       if(this.props.type === 'number') {
diff --git a/src/components/inputs/FontInput.jsx b/src/components/inputs/FontInput.jsx
index 12c531d..573f4f9 100644
--- a/src/components/inputs/FontInput.jsx
+++ b/src/components/inputs/FontInput.jsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import AutocompleteInput from './AutocompleteInput'
 import input from '../../config/input.js'
+import { margins } from '../../config/scales.js'
 
 //TODO: Query available font stack dynamically
 import fontStacks from '../../config/fontstacks.json'
@@ -29,10 +30,17 @@ class FontInput extends React.Component {
         value={value}
         options={fontStacks.map(f => [f, f])}
         onChange={this.changeFont.bind(this, i)}
+        wrapperStyle={{
+          display: 'block',
+          marginBottom: i == this.values.length - 1 ? 0 : margins[2],
+        }}
       />
     })
 
-    return <div style={{display: 'inline-block'}}>
+    return <div style={{
+      display: 'inline-block',
+      ...this.props.style
+    }}>
       {inputs}
     </div>
   }