put a load of margin on the bottommost sublist to increase its hit target size and avoid problems when toggling its hiddenness

src/skins/vector/css/organisms/RoomSubList.css

@@ -20,6 +20,11 @@ limitations under the License.
     width: 100%;
 }
 
+.mx_RoomSubList_bottommost {
+    /* XXX: this should really be 100% of the RoomList height, but can't seem to get at it */
+    min-height: 400px;
+}
+
 .mx_RoomSubList_label {
     text-transform: uppercase;
     color: #3d3b39;

src/skins/vector/views/organisms/RoomList.js

@@ -71,16 +71,6 @@ module.exports = React.createClass({
                              selectedRoom={ self.props.selectedRoom }
                              collapsed={ self.props.collapsed } />
 
-                <RoomSubList list={ self.state.lists['m.lowpriority'] }
-                             label="Low priority"
-                             tagName="m.lowpriority"
-                             verb="demote"
-                             editable={ true }
-                             order="recent"
-                             activityMap={ self.state.activityMap }
-                             selectedRoom={ self.props.selectedRoom }
-                             collapsed={ self.props.collapsed } />
-
                 { Object.keys(self.state.lists).map(function(tagName) {
                     if (!tagName.match(/^m\.(invite|favourite|recent|lowpriority|archived)$/)) {
                         return <RoomSubList list={ self.state.lists[tagName] }
@@ -97,10 +87,22 @@ module.exports = React.createClass({
                     }
                 }) }
 
+                <RoomSubList list={ self.state.lists['m.lowpriority'] }
+                             label="Low priority"
+                             tagName="m.lowpriority"
+                             verb="demote"
+                             editable={ true }
+                             order="recent"
+                             bottommost={ self.state.lists['m.archived'].length === 0 }
+                             activityMap={ self.state.activityMap }
+                             selectedRoom={ self.props.selectedRoom }
+                             collapsed={ self.props.collapsed } />
+
                 <RoomSubList list={ self.state.lists['m.archived'] }
                              label="Historical"
                              editable={ false }
                              order="recent"
+                             bottommost={ true }
                              activityMap={ self.state.activityMap }
                              selectedRoom={ self.props.selectedRoom }
                              collapsed={ self.props.collapsed } />

src/skins/vector/views/organisms/RoomSubList.js

@@ -60,6 +60,7 @@ var RoomSubList = React.createClass({
         tagName: React.PropTypes.string,
         editable: React.PropTypes.bool,
         order: React.PropTypes.string.isRequired,
+        bottommost: React.PropTypes.bool,
         selectedRoom: React.PropTypes.string.isRequired,
         activityMap: React.PropTypes.object.isRequired,
         collapsed: React.PropTypes.bool.isRequired
@@ -245,16 +246,22 @@ var RoomSubList = React.createClass({
             target = <RoomDropTarget label={ 'Drop here to ' + this.props.verb }/>;
         }
 
-        var subList;
-        if (!this.state.hidden) {
-            subList = <div className="mx_RoomSubList">
-                            { target }
-                            { this.makeRoomTiles() }
-                        </div>;
-        }
-
-
         if (this.state.sortedList.length > 0 || this.props.editable) {
+            var subList;
+            var classes = "mx_RoomSubList" +
+                          (this.props.bottommost ? " mx_RoomSubList_bottommost" : "");
+
+            if (!this.state.hidden) {
+                subList = <div className={ classes }>
+                                { target }
+                                { this.makeRoomTiles() }
+                          </div>;
+            }
+            else {
+                subList = <div className={ classes }>
+                          </div>;                
+            }
+
             return connectDropTarget(
                 <div>
                     <h2 onClick={ this.onClick } className="mx_RoomSubList_label">{ this.props.collapsed ? '' : this.props.label }