Ensure zoom icon is nice

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

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 />

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') {

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>
   }