completely change the CSS to be an entirely 'position: absolute' layout rather than top-to-bottom. makes the overscroll much more predictable and sane and not dependent on CSS expressions.

2 files changed, 10 insertions, 5 deletions

diff --git a/webclient/room/room-controller.js b/webclient/room/room-controller.js

index a30f46baf8..470f41521a 100644
--- a/webclient/room/room-controller.js
+++ b/webclient/room/room-controller.js
@@ -42,6 +42,8 @@ angular.module('RoomController', [])
                 console.log("Got response from "+$scope.state.events_from+" to "+response.data.end);
                 $scope.state.events_from = response.data.end;
 
+                $scope.feedback = "";
+
                 for (var i = 0; i < response.data.chunk.length; i++) {
                     var chunk = response.data.chunk[i];
                     if (chunk.room_id == $scope.room_id && chunk.type == "m.room.message") {
@@ -68,10 +70,12 @@ angular.module('RoomController', [])
                     $timeout(shortPoll, 0);
                 }
             }, function(response) {
-                $scope.feedback = "Can't stream: " + JSON.stringify(response);
+                $scope.feedback = "Can't stream: " + response.data;
+
                 if (response.status == 403) {
                     $scope.stopPoll = true;
                 }
+                
                 if ($scope.stopPoll) {
                     console.log("Stopping polling.");
                 }
diff --git a/webclient/room/room.html b/webclient/room/room.html

index 87d3458af5..51af54e7b2 100644
--- a/webclient/room/room.html
+++ b/webclient/room/room.html
@@ -1,6 +1,7 @@
 <div ng-controller="RoomController" data-ng-init="onInit()" class="room">
 
     <div class="page">
+    <div class="wrapper">
 
     <div class="roomName">
         {{ room_alias || room_id }}
@@ -12,7 +13,8 @@
                 <td class="userAvatar">
                     <img class="userAvatarImage" ng-src="{{info.avatar_url || 'img/default-profile.jpg'}}" width="80" height="80"/>
                     <img class="userAvatarGradient" src="img/gradient.png" width="80" height="24"/>
-                    <div class="userName">{{ info.displayname || name }}</div>
+                    <!-- FIXME: does allowing <wbr/> to be unescaped introduce HTML injections from user IDs and display names? -->
+                    <div class="userName" ng-bind-html="info.displayname || (name.substr(0, name.indexOf(':')) + '<wbr/>' + name.substr(name.indexOf(':'))) | to_trusted"></div>
                 </td>
                 <td class="userPresence" ng-class="info.presenceState === 'online' ? 'online' : (info.presenceState === 'unavailable' ? 'unavailable' : '')" />
         </table>
@@ -45,6 +47,7 @@
     </div>
     
     </div>
+    </div>
 
     <div class="controlPanel">
         <div class="controls">
@@ -53,7 +56,7 @@
                     <td width="1">
                         {{ state.user_id }} 
                     </td>
-                    <td width="*">
+                    <td width="*" style="min-width: 100px">
                         <input class="mainInput" ng-model="textInput" ng-enter="send()" ng-focus="true"/>
                     </td>
                     <td width="1">
@@ -85,7 +88,5 @@
             <button ng-click="leaveRoom()">Leave</button>
         </div>
     </div>
-    
-    
 
  </div>