Fix margins in source editing area

src/components/filter/FilterEditor.jsx

@@ -38,13 +38,16 @@ class CombiningOperatorSelect extends React.Component {
       return <option key={op} value={op}>{op}</option>
     })
 
-    return <div>
-
+    return <div
+      style={{
+          marginTop: margins[1],
+          marginBottom: margins[1],
+        }}
+      >
       <select
         style={{
           ...input.select,
           width: '20.5%',
-          margin: margins[0],
         }}
         value={this.props.value}
         onChange={e => this.props.onChange(e.target.value)}
@@ -103,11 +106,14 @@ class SingleFilterEditor extends React.Component {
     const propertyName = f[1]
     const filterArgs = f.slice(2)
 
-    return <div>
+    return <div style={{
+      marginTop: margins[1],
+      marginBottom: margins[1],
+    }}>
       <AutocompleteInput
         wrapperStyle={{
-          width: '35%',
-          margin: margins[0],
+          width: '31%',
+          marginRight: margins[0]
         }}
         value={propertyName}
         options={Object.keys(this.props.properties).map(propName => [propName, propName])}
@@ -119,8 +125,8 @@ class SingleFilterEditor extends React.Component {
       />
       <StringInput
         style={{
-          width: '35%',
-          margin: margins[0]
+          width: '50%',
+          marginLeft: margins[0]
         }}
         value={filterArgs.join(',')}
         onChange={ v=> this.onFilterPartChanged(filterOp, propertyName, v.split(','))}

src/components/layers/LayerEditor.jsx

@@ -13,6 +13,7 @@ import LayerSourceLayerBlock from './LayerSourceLayerBlock'
 import InputBlock from '../inputs/InputBlock'
 import MultiButtonInput from '../inputs/MultiButtonInput'
 
+import input from '../../config/input.js'
 import { changeType, changeProperty } from '../../libs/layer'
 import layout from '../../config/layout.json'
 import { margins, fontSizes } from '../../config/scales'
@@ -106,13 +107,6 @@ export default class LayerEditor extends React.Component {
           />
         </div>
       case 'source': return <div>
-        {this.props.layer.filter &&
-        <FilterEditor
-          filter={this.props.layer.filter}
-          properties={this.props.vectorLayers[this.props.layer['source-layer']]}
-          onChange={f => this.changeProperty(null, 'filter', f)}
-        />
-        }
         <LayerSourceBlock
           sourceIds={Object.keys(this.props.sources)}
           value={this.props.layer.source}
@@ -123,6 +117,15 @@ export default class LayerEditor extends React.Component {
           value={this.props.layer['source-layer']}
           onChange={v => this.changeProperty(null, 'source-layer', v)}
         />
+        {this.props.layer.filter &&
+        <div style={input.property}>
+          <FilterEditor
+            filter={this.props.layer.filter}
+            properties={this.props.vectorLayers[this.props.layer['source-layer']]}
+            onChange={f => this.changeProperty(null, 'filter', f)}
+          />
+        </div>
+        }
       </div>
       case 'properties': return <PropertyGroup
         layer={this.props.layer}

src/components/layers/LayerSourceBlock.jsx

@@ -23,6 +23,7 @@ class LayerSourceBlock extends React.Component {
         value={this.props.value}
         onChange={this.props.onChange}
         options={this.props.sourceIds.map(src => [src, src])}
+        wrapperStyle={{ width: '50%' }}
       />
     </InputBlock>
   }

src/components/layers/LayerSourceLayerBlock.jsx

@@ -23,6 +23,7 @@ class LayerSourceLayer extends React.Component {
         value={this.props.value}
         onChange={this.props.onChange}
         options={this.props.sourceLayerIds.map(l => [l, l])}
+        wrapperStyle={{ width: '50%' }}
       />
     </InputBlock>
   }