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.

webclient/app.css

@@ -11,21 +11,33 @@ h1 {
 /*** Overall page layout ***/
 
 .page {
-    max-width: 1280px;
+    position: absolute;
+    top: 80px;
+    bottom: 100px;
+    left: 0px;
+    right: 0px;
+    margin: 20px;
+    margin: 20px;
+}
+
+.wrapper {
     margin: auto;
-    margin-bottom: 80px ! important;
-    padding-left: 20px;
-    padding-right: 20px;
+    max-width: 1280px;
+    height: 100%;
 }
 
 .roomName {
+    max-width: 1280px;
+    width: 100%;
     text-align: right;
+    top: -40px;
+    position: absolute;
     font-size: 16pt;
     margin-bottom: 10px;
 }
 
 .controlPanel {
-    position: fixed;
+    position: absolute;
     bottom: 0px;
     width: 100%;
     background-color: #f8f8f8;
@@ -70,8 +82,9 @@ h1 {
 
 .userAvatar {
     width: 80px;
-    height: 80px;
+    height: 100px;
     position: relative;
+    background-color: #000;
 }
 
 .userAvatar .userAvatarImage {
@@ -81,7 +94,7 @@ h1 {
 
 .userAvatar .userAvatarGradient {
     position: absolute;
-    bottom: 0px;
+    bottom: 20px;
 }
 
 .userAvatar .userName {
@@ -91,7 +104,6 @@ h1 {
     bottom: 0px;
     font-size: 8pt;
     word-wrap: break-word;
-    word-break: break-all;
 }
 
 .userPresence {
@@ -110,27 +122,18 @@ h1 {
     background-color: #FFCC00;
 }
 
-/*** Room page  ***/
-
-/* Limit the height of the page content to 100% of the viewport height minus the
-   height of the header and the footer.
-   The two divs containing the messages list and the users list will then scroll-
-   overflow separetely. 
-  */
-.room .page {
-    height: calc(100vh - 220px); 
-}
-
 /*** Message table ***/
 
 .messageTableWrapper {
-    width: auto;
     height: 100%;
     margin-right: 140px;
     overflow-y: auto;
+    width: auto;
 }
 
 .messageTable {
+    margin: auto;
+    max-width: 1280px;
     width: 100%;
     border-collapse: collapse;
 }
@@ -180,6 +183,8 @@ h1 {
     height: 32px;
     display: inline-table;
     max-width: 90%;
+    word-wrap: break-word;
+    word-break: break-all;
 }
 
 .emote {
@@ -217,12 +222,10 @@ h1 {
 /******************************/
 
 .header {
-    margin-top: 12px ! important;
     padding-left: 20px;
     padding-right: 20px;
     max-width: 1280px;
     margin: auto;
-    height: 60px;
 }
 
 .header-buttons {

webclient/app.js

@@ -70,4 +70,9 @@ matrixWebClient
                 $timeout(function() { element[0].focus() }, 0);
             }
         };
+    }])
+    .filter('to_trusted', ['$sce', function($sce){
+        return function(text) {
+            return $sce.trustAsHtml(text);
+        };
     }]);

webclient/login/login.html

@@ -1,5 +1,6 @@
 <div ng-controller="LoginController" class="login">
     <div class="page">
+    <div class="wrapper">
 
     {{ feedback }}
         
@@ -47,5 +48,6 @@
     <br/>
     
 
+    </div>
     </div>
 </div>

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.");
                 }

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>
@@ -44,6 +46,7 @@
         </table>
     </div>
     
+    </div>
     </div>
 
     <div class="controlPanel">
@@ -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">
@@ -86,6 +89,4 @@
         </div>
     </div>
 
-    
-
  </div>

webclient/rooms/rooms.html

@@ -1,6 +1,7 @@
 <div ng-controller="RoomsController" class="rooms">
 
     <div class="page">
+    <div class="wrapper">
             
     <div>
         <form>
@@ -77,4 +78,5 @@
     {{ feedback }}
 
     </div>    
+    </div>
 </div>