Replace conversation panel js resizing with flex styling.

// FREEBIE

js/views/conversation_view.js

@@ -266,21 +266,12 @@
             this.view.measureScrollPosition();
             window.autosize(this.$messageField);
 
-            var $discussionContainer = this.$('.discussion-container'),
+            var $attachmentPreviews = this.$('.attachment-previews'),
-                $conversationHeader = this.$('.conversation-header'),
-                $attachmentPreviews = this.$('.attachment-previews'),
                 $bottomBar = this.$('.bottom-bar');
 
             $bottomBar.outerHeight(
                     this.$messageField.outerHeight() +
                     $attachmentPreviews.outerHeight() + 1);
-            var $bottomBarNewHeight = $bottomBar.outerHeight();
-
-            //TODO: revisit this logic for new layout.
-            $discussionContainer.outerHeight(
-                    this.$el.outerHeight() -
-                    $bottomBarNewHeight -
-                    $conversationHeader.outerHeight() - 40);
 
             this.view.scrollToBottomIfNeeded();
         },

stylesheets/_conversation.scss

@@ -28,16 +28,30 @@
 
   .panel {
     height: 100%;
+    display: flex;
+    flex-direction: column;
 
     .discussion-container {
-      height: calc(100% - 2 * #{$header-height} - 60px);
+      flex-grow: 1;
+      position: relative;
+
+      .message-list {
+        position: absolute;
+        top: 0;
+        height: 100%;
+        width: 100%;
+
+        @media(min-width: $big-avatar-min-width) {
+          padding-left: 70px;
+        }
+      }
     }
   }
 }
 
 .group-member-list,
 .new-group-update,
-.message-list, .message-detail, .key-verification {
+.message-detail, .key-verification {
   height: 100%;
 }
 
@@ -282,7 +296,7 @@
     margin-left: 8px;
     max-width: 30em;
 
-    @media(max-width:900px) {
+    @media(max-width: $big-avatar-min-width - 1px) {
       max-width: calc(100% - 45px); // avatar size + padding
     }
 

stylesheets/_index.scss

@@ -70,11 +70,14 @@
     height: 36px;
     line-height: 36px;
   }
-  @media(min-width:900px) {
+  @media(min-width: $big-avatar-min-width) {
     .avatar {
       width: 70px;
       height: 70px;
       line-height: 70px;
+      margin-bottom: -60px;
+      position: relative;
+      z-index: 10;
     }
   }
 }

stylesheets/_variables.scss

@@ -35,3 +35,5 @@ $bubble-border-radius: 20px;
 
 $unread-badge-size: 21px;
 $loading-height: 16px;
+
+$big-avatar-min-width: 900px;

stylesheets/manifest.css

@@ -434,7 +434,10 @@ img.emoji {
     .conversation-header .avatar {
       width: 70px;
       height: 70px;
-      line-height: 70px; } }
+      line-height: 70px;
+      margin-bottom: -60px;
+      position: relative;
+      z-index: 10; } }
 
 .menu.conversation-menu button.drop-down {
   background: url("/images/arrow_drop_down.png") no-repeat center; }
@@ -601,13 +604,24 @@ input.search {
   .conversation ::-webkit-scrollbar-thumb {
     background: rgba(0, 0, 0, 0.15); }
   .conversation .panel {
-    height: 100%; }
+    height: 100%;
+    display: flex;
+    flex-direction: column; }
     .conversation .panel .discussion-container {
-      height: calc(100% - 2 * 36px - 60px); }
+      flex-grow: 1;
+      position: relative; }
+      .conversation .panel .discussion-container .message-list {
+        position: absolute;
+        top: 0;
+        height: 100%;
+        width: 100%; }
+        @media (min-width: 900px) {
+          .conversation .panel .discussion-container .message-list {
+            padding-left: 70px; } }
 
 .group-member-list,
 .new-group-update,
-.message-list, .message-detail, .key-verification {
+.message-detail, .key-verification {
   height: 100%; }
 
 .key-verification {
@@ -784,7 +798,7 @@ input.search {
     word-wrap: break-word;
     margin-left: 8px;
     max-width: 30em; }
-    @media (max-width: 900px) {
+    @media (max-width: 899px) {
       .message-detail .bubble,
       .message-list .bubble {
         max-width: calc(100% - 45px); } }