Handle theme dropdown menu resizing

Signed-off-by: Yukai Huang <yukaihuangtw@gmail.com>

public/js/lib/editor/index.js

@@ -1,12 +1,15 @@
 /* global CodeMirror, $, editor, Cookies */
+import { options, Alignment, FormatType } from '@susisu/mte-kernel'
+import debounce from 'lodash/debounce'
+
 import * as utils from './utils'
 import config from './config'
 import statusBarTemplate from './statusbar.html'
 import toolBarTemplate from './toolbar.html'
 import './markdown-lint'
 import { initTableEditor } from './table-editor'
-import { options, Alignment, FormatType } from '@susisu/mte-kernel'
 import { availableThemes } from './constants'
+import {  } from './ui-elements'
 
 /* config section */
 const isMac = CodeMirror.keyMap.default === CodeMirror.keyMap.macDefault
@@ -326,6 +329,8 @@ export default class Editor {
     this.setSpellcheck()
     this.setLinter()
     this.setPreferences()
+
+    this.handleStatusBarResize()
   }
 
   updateStatusBar () {
@@ -350,6 +355,21 @@ export default class Editor {
     }
   }
 
+  handleStatusBarResize () {
+    const onResize = debounce(() => {
+      if (!this.statusBar) {
+        return
+      }
+
+      const maxHeight = window.innerHeight - this.statusBar.height() - 50 /* navbar height */ - 10 /* spacing */
+      this.statusBar.find('.status-theme ul.dropdown-menu').css('max-height', `${maxHeight}px`)
+    }, 300)
+
+    $(window).resize(onResize)
+
+    onResize()
+  }
+
   setIndent () {
     var cookieIndentType = Cookies.get('indent_type')
     var cookieTabSize = parseInt(Cookies.get('tab_size'))

public/js/lib/editor/statusbar.html

@@ -31,11 +31,11 @@
             <div class="indent-width-label" title="Click to change indentation size">4</div>
             <input class="indent-width-input hidden" type="number" min="1" max="10" maxlength="2" size="2">
         </div>
-        <div class="status-theme dropup pull-right">
+        <div class="status-theme dropup">
             <a id="themeLabel" class="ui-theme-label text-uppercase" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Select theme">
                 <i class="fa fa-paint-brush fa-fw"></i>
             </a>
-            <ul class="dropdown-menu" aria-labelledby="themeLabel">
+            <ul class="dropdown-menu" aria-labelledby="themeLabel" style="overflow: auto;">
             </ul>
         </div>
         <div class="status-spellcheck">