Fix the scrolling CSS disaster

src/components/Layout.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import ScrollContainer from './ScrollContainer'
 
 import theme from '../config/rebass'
 import colors from '../config/colors'
@@ -31,29 +32,33 @@ export default class Layout extends React.Component {
     }}>
       {this.props.toolbar}
       <div style={{
-        position: 'absolute',
+        position: 'fixed',
         bottom: 0,
         height: "100%",
         top: 40,
         left: 0,
-        zIndex: 100,
+        zIndex: 1,
         width: 200,
         overflow: "hidden",
         backgroundColor: colors.black
       }}>
-        {this.props.layerList}
+        <ScrollContainer>
+          {this.props.layerList}
+        </ScrollContainer>
       </div>
       <div style={{
-        position: 'absolute',
+        position: 'fixed',
         bottom: 0,
         height: "100%",
         top: 40,
         left: 200,
-        zIndex: 100,
+        zIndex: 1,
         width: 300,
         backgroundColor: colors.black
       }}>
-        {this.props.layerEditor}
+        <ScrollContainer>
+          {this.props.layerEditor}
+        </ScrollContainer>
       </div>
       {this.props.map}
     </div>

src/components/ScrollContainer.jsx

@@ -3,6 +3,7 @@ import scrollbars from './scrollbars.scss'
 
 const ScrollContainer = (props) => {
   return <div className={scrollbars.darkScrollbar} style={{
+    overflowX: "visible",
     overflowY: "scroll",
     bottom:0,
     left:0,

src/components/fields/ColorField.jsx

@@ -22,7 +22,27 @@ class ColorField extends React.Component {
   constructor(props) {
     super(props)
     this.state = {
-      pickerOpened: false
+      pickerOpened: false,
+    }
+  }
+
+  //TODO: I much rather would do this with absolute positioning
+  //but I am too stupid to get it to work together with fixed position
+  //and scrollbars so I have to fallback to JavaScript
+  calcPickerOffset() {
+    const elem = this.refs.colorInput
+    if(elem) {
+      const pos = elem.getBoundingClientRect()
+      return {
+        top: pos.top,
+        left: pos.left + 165,
+      }
+    } else {
+      console.log('No elem!!')
+      return {
+        top: 160,
+        left: 500,
+      }
     }
   }
 
@@ -35,10 +55,13 @@ class ColorField extends React.Component {
   }
 
   render() {
-    const picker = <div style={{
-        position: 'absolute',
-        left: 163,
-        top: 0,
+    const offset = this.calcPickerOffset()
+    const picker = <div
+      style={{
+        position: 'fixed',
+        zIndex: 1,
+        left: offset.left,
+        top: offset.top,
       }}>
       <ChromePicker
         color={this.color.object()}
@@ -53,7 +76,8 @@ class ColorField extends React.Component {
           right: '0px',
           bottom: '0px',
           left: '0px',
-        }} />
+        }}
+      />
     </div>
 
     return <div style={{
@@ -63,6 +87,7 @@ class ColorField extends React.Component {
     }}>
       {this.state.pickerOpened && picker}
       <input
+        ref="colorInput"
         onClick={this.togglePicker.bind(this)}
         style={{
           ...input.select,

src/components/layers/LayerEditor.jsx

@@ -5,8 +5,6 @@ import FilterEditor from '../filter/FilterEditor'
 import PropertyGroup from '../fields/PropertyGroup'
 import LayerEditorGroup from './LayerEditorGroup'
 
-import ScrollContainer from '../ScrollContainer'
-
 import layout from '../../config/layout.json'
 import theme from '../../config/rebass.js'
 

src/components/layers/LayerList.jsx

@@ -3,7 +3,6 @@ import PureRenderMixin from 'react-addons-pure-render-mixin';
 import cloneDeep from 'lodash.clonedeep'
 
 import LayerListItem from './LayerListItem'
-import ScrollContainer from '../ScrollContainer'
 
 import style from '../../libs/style.js'
 import { margins } from '../../config/scales.js'
@@ -76,11 +75,9 @@ class LayerListContainer extends React.Component {
         onLayerVisibilityToggle={this.onLayerVisibilityToggle.bind(this)}
       />
     })
-    return <ScrollContainer>
-      <ul style={{ padding: margins[1], paddingRight: 0, margin: 0 }}>
-        {layerPanels}
-      </ul>
-    </ScrollContainer>
+    return <ul style={{ padding: margins[1], paddingRight: 0, margin: 0 }}>
+      {layerPanels}
+    </ul>
   }
 }