fix up MemberInfo behaviour

skins/base/css/molecules/MemberInfo.css

@@ -22,7 +22,7 @@ limitations under the License.
     position: absolute;
     width: 200px;
     margin-left: -295px;
-    margin-top: -12px;
+    margin-top: 0px;
     z-index: 1000;
     padding: 6px;
 }
@@ -34,6 +34,17 @@ limitations under the License.
     top: 0px;
 }
 
+/*
+ * a hacky shim to extend the hitmask of the overlay to overlap
+ * better with the main menu itself
+ */
+.mx_MemberInfo_shim {
+    position: absolute;
+    left: 212px;
+    width: 40px;
+    height: 100%;
+}
+
 .mx_MemberInfo_avatar {
     padding: 6px;
 }
@@ -44,7 +55,6 @@ limitations under the License.
 
 .mx_MemberInfo_field {
     padding: 6px;
-    font-weight: bold;
 }
 
 .mx_MemberInfo_button {

skins/base/views/molecules/MemberInfo.js

@@ -25,6 +25,16 @@ module.exports = React.createClass({
     displayName: 'MemberInfo',
     mixins: [MemberInfoController],
 
+    componentDidMount: function() {
+        var self = this;
+
+        var memberInfo = this.getDOMNode();
+        var memberListScroll = document.getElementsByClassName("mx_MemberList_border")[0];
+        if (memberListScroll) {
+            memberInfo.style.top = (memberInfo.parentElement.offsetTop - memberListScroll.scrollTop) + "px";
+        }
+    },
+
     getDuration: function(time) {
         if (!time) return;
         var t = parseInt(time / 1000);
@@ -61,6 +71,7 @@ module.exports = React.createClass({
         return (
             <div className="mx_MemberInfo">
                 <img className="mx_MemberInfo_chevron" src="img/chevron-right.png" width="9" height="16" />
+                <div className="mx_MemberInfo_shim"></div>
                 <div className="mx_MemberInfo_avatar">
                     <img className="mx_MemberInfo_avatarImg"
                          src={ this.props.member ? MatrixClientPeg.get().getAvatarUrlForMember(this.props.member, 128, 128, "crop") : null }

skins/base/views/organisms/MemberList.js

@@ -30,6 +30,18 @@ module.exports = React.createClass({
     displayName: 'MemberList',
     mixins: [MemberListController],
 
+    // FIXME: combine this more nicely with the MemberInfo positioning stuff...
+    onMemberListScroll: function(ev) {
+        if (this.refs.memberListScroll) {
+            var memberListScroll = this.refs.memberListScroll.getDOMNode();
+            // offset the current MemberInfo bubble
+            var memberInfo = document.getElementsByClassName("mx_MemberInfo")[0];
+            if (memberInfo) {
+                memberInfo.style.top = (memberInfo.parentElement.offsetTop - memberListScroll.scrollTop) + "px";
+            }
+        }
+    },
+
     makeMemberTiles: function() {
         var self = this;
         return Object.keys(self.state.memberDict).map(function(userId) {
@@ -71,7 +83,7 @@ module.exports = React.createClass({
                 <div className="mx_MemberList_chevron">
                     <img src="img/chevron.png" width="24" height="13"/>
                 </div>
-                <div className="mx_MemberList_border">
+                <div className="mx_MemberList_border" ref="memberListScroll" onScroll={ this.onMemberListScroll }>
                     <h2>Members</h2>
                     <div className="mx_MemberList_wrapper">
                         {this.makeMemberTiles()}