Fix toolbar overflow and jank issues

components/ReadFileDropContainer.js

@@ -0,0 +1,19 @@
+import React from 'react'
+import { DropTarget } from 'react-dnd'
+import { NativeTypes } from 'react-dnd-html5-backend'
+
+const spec = {
+  drop (props, monitor) {
+    const bundle = monitor.getItem()
+    const file = bundle.files[0]
+    const reader = new FileReader()
+    reader.onload = event => props.onDrop(event.target.result)
+    reader.readAsText(file, 'UTF-8');
+  }
+}
+
+const collect = connect => ({ connectDropTarget: connect.dropTarget() })
+
+const ReadFileDropContainer = props => props.connectDropTarget(props.children)
+
+export default DropTarget(NativeTypes.FILE, spec, collect)(ReadFileDropContainer)

components/dropdown.js

@@ -51,8 +51,12 @@ export default class extends React.Component {
   }
 
   render() {
+    // find longest list value in number of characters
+    const MIN_WIDTH = this.props.list.reduce((max, { name }) =>
+      (name.length > max ? name.length : max), 0)
+
     return (
-      <div className="dropdown-container" onClick={this.toggle}>
+      <div className="dropdown-container" style={{ minWidth: MIN_WIDTH * 14 }} onClick={this.toggle}>
         <div className={`dropdown-display ${this.state.listVisible ? 'list-visible' : ''}`}>
           <span>{ this.state.selected.name }</span>
           <div className="arrow-down"><ArrowDown /></div>
@@ -62,7 +66,8 @@ export default class extends React.Component {
         </div>
         <style jsx>{`
           .arrow-down {
-            margin-left: 16px;
+            position: absolute;
+            right: 16px;
           }
 
           .list-visible > .arrow-down {
@@ -85,7 +90,7 @@ export default class extends React.Component {
             user-select: none;
             padding: 8px 16px;
             display: flex;
-            justify-content: center;
+            justify-content: flex-start;
             align-items: center;
             position: relative;
             z-index: 1;
@@ -105,6 +110,8 @@ export default class extends React.Component {
             margin-top: -2px;
             border: 0.5px solid #333;
             border-radius: 0px 0px 3px 3px;
+            max-height: 350px;
+            overflow-y: scroll;
           }
         `}</style>
       </div>

components/toolbar.js

@@ -11,19 +11,68 @@ const themes = [
 ]
 
 const langauges = [
-  {
+  'Auto Detect',
-    name: 'javascript'
+  'Plain Text',
-  },
+  'AppleScript',
-  {
+  'BoxNote',
-    name: 'python'
+  'C',
-  },
+  'C#',
-  {
+  'CSS',
-    name: 'c'
+  'CSV',
-  },
+  'Closure',
-  {
+  'CoffeeScript',
-    name: 'shitty ass java'
+  'Cold Fusion',
-  }
+  'Crystal',
-]
+  'Cypher',
+  'D',
+  'Dart',
+  'Diff',
+  'Docker',
+  'Erlang',
+  'F#',
+  'Fortran',
+  'Gherkin',
+  'Go',
+  'Groovy',
+  'HTML',
+  'Haskell',
+  'Haxe',
+  'Java',
+  'JavaScript',
+  'JSON',
+  'Julia',
+  'Kotlin',
+  'LaTex',
+  'Lisp',
+  'Lua',
+  'MATLAB',
+  'MUMPS',
+  'Markdown (raw)',
+  'OCaml',
+  'Objective-C',
+  'PHP',
+  'Pascal',
+  'Perl',
+  'Pig',
+  'Post',
+  'Puppet',
+  'Python',
+  'R',
+  'Ruby',
+  'Rust',
+  'SQL',
+  'Sass',
+  'Scheme',
+  'Smalltalk',
+  'Swift',
+  'TSV',
+  'VB.NET',
+  'VBScript',
+  'Velocity',
+  'Verilog',
+  'XML',
+  'YAML'
+].map(name => ({ name }))
 
 export default class extends React.Component {
   constructor() {