Reposition dropdown on window resize

mail.js

@@ -45,11 +45,13 @@ var Store = {
 
 var DropDownBase = {
     instances: {},
+    currentVisible: null,
     componentDidMount: function()
     {
         if (!DropDownBase.setBodyListener)
         {
             window.addEventListener('click', DropDownBase.hideAll);
+            window.addEventListener('resize', DropDownBase.repositionCurrent);
             DropDownBase.setBodyListener = true;
         }
         DropDownBase.instances[this.props.id] = this;
@@ -59,9 +61,16 @@ var DropDownBase = {
         for (var i in DropDownBase.instances)
             DropDownBase.instances[i].hide();
     },
+    repositionCurrent: function()
+    {
+        if (DropDownBase.currentVisible)
+            DropDownBase.currentVisible[0].showAt(DropDownBase.currentVisible[1], DropDownBase.currentVisible[0].onClose);
+    },
     componentWillUnmount: function()
     {
         delete DropDownBase.instances[this.props.id];
+        if (DropDownBase.currentVisible[0] == this)
+            DropDownBase.currentVisible = null;
     },
     getInitialState: function()
     {
@@ -74,6 +83,7 @@ var DropDownBase = {
     hide: function()
     {
         this.setState({ visible: false });
+        DropDownBase.currentVisible = null;
         if (this.onClose)
         {
             this.onClose();
@@ -82,12 +92,12 @@ var DropDownBase = {
     },
     showAt: function(el, onClose)
     {
-        if (this.onClose)
+        if (this.onClose && this.onClose != onClose)
         {
             this.onClose();
             delete this.onClose;
         }
-        // TODO: move on window resize
+        DropDownBase.currentVisible = [ this, el ];
         var p = getOffset(el);
         var left = p.left, top = p.top+el.offsetHeight, calloutLeft = null;
         this.setState({ visible: true, top: top, left: left, selectedItem: -1 });
@@ -504,12 +514,12 @@ var AccountFolders = React.createClass({
         return <div className="account">
             <div className={"account-header"+(this.state.collapsed ? ' collapsed' : '')} onClick={this.onClick}>
                 {this.props.name}
+                <div key="n" className="msg-count">{this.props.unreadCount}</div>
                 {this.props.accountId ? [
                     <div key="load" className="loading icon" style={{display: this.props.loading ? '' : 'none'}}></div>,
                     <div key="warn" className="warning icon" style={{display: this.props.warning ? '' : 'none'}}></div>,
                     <div key="cfg" className={'cfg'+(this.state.cfgPressed ? ' pressed' : '')} onClick={this.showCfg}></div>
                 ] : null}
-                <div key="n" className="msg-count">{this.props.unreadCount}</div>
             </div>
             <div className={"account-folders"+(this.state.collapsed ? ' collapsed' : '')} style={{ height: this.state.h }}>
                 <div ref="vis" className={'visible-part'+(this.state.animating ? ' animating' : '')}>