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.

1 files changed, 25 insertions, 22 deletions

diff --git a/webclient/app.css b/webclient/app.css
index 15b6c91300..0111b78e02 100644
--- a/webclient/app.css
+++ b/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 {