Fix layer scrolling

src/app.jsx

@@ -7,6 +7,7 @@ import { LayerEditor } from './layers.jsx'
 
 import theme from './theme.js'
 import layout from './layout.scss'
+import 'react-virtualized/styles.css';
 
 export class WorkspaceDrawer extends React.Component {
 	render() {
@@ -19,13 +20,13 @@ export class WorkspaceDrawer extends React.Component {
 		return <div style={{
 			zIndex: 100,
 			position: "fixed",
-			height: "100%",
-			left: "60",
+			left: 60,
 			width: 300,
-			top: "0",
-			bottom: "0",
+			top: 0,
+			bottom: 0,
+			overflow: "hidden",
 			backgroundColor: theme.colors.gray}
-		} >
+		}>
 			{editor}
 		</div>
 	}

src/layers.jsx

@@ -3,8 +3,8 @@ import React from 'react'
 import { Heading, Checkbox, Slider, Switch, Input, Panel, PanelHeader, Toolbar, NavItem, Tooltip, Container, Space} from 'rebass'
 import { Button, Text } from 'rebass'
 import Collapse from 'react-collapse'
-
 import theme from './theme.js'
+import scrollbars from './scrollbars.scss'
 
 export class FillLayer extends React.Component {
 	render() {
@@ -66,7 +66,16 @@ export class LayerEditor extends React.Component {
 		});
 		return <div>
 			<Heading level={2}>Layers</Heading>
+			<div className={scrollbars.darkScrollbar} style={{
+				overflowY: "scroll",
+				bottom:0,
+				left:0,
+				right:0,
+				top:40,
+				position: "absolute",
+			}}>
 			{layerPanels}
+			</div>
 		</div>
 	}
 }

src/scrollbars.scss

@@ -0,0 +1,12 @@
+.darkScrollbar::-webkit-scrollbar {
+	background-color: #313131;
+	width: 10px;
+}
+
+.darkScrollbar::-webkit-scrollbar-thumb {
+	border-radius: 6px;
+	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
+	background-color: #555;
+	padding-left: 2px;
+	padding-right: 2px;
+}

src/theme.js

@@ -40,7 +40,7 @@ const border = {
 const dark = {
   name: 'Dark',
   color: colors.white,
-	fontFamily: 'Roboto, sans-serif',
+	fontFamily: 'Open Sans Bold, sans-serif',
   scale,
 	fontSizes,
   colors,
@@ -53,10 +53,12 @@ const dark = {
 		borderLeft: 0,
 		borderRight: 0,
 		marginBottom: 0,
+		paddingBottom: 0,
 	},
 	PanelHeader: {
 		marginRight: -10,
-		fontSize: fontSizes[4],
+		marginBottom: 0,
+		fontSize: fontSizes[5],
 		fontWeight: 400,
 		color: colors.white,
 	},