diff --git a/zephyr/static/js/message_list.js b/zephyr/static/js/message_list.js
index 4a0b69dd38..ac22814b50 100644
--- a/zephyr/static/js/message_list.js
+++ b/zephyr/static/js/message_list.js
@@ -397,7 +397,7 @@ MessageList.prototype = {
                               }});
         }
 
-        $.each(rendered_elems, ui.process_collapsing);
+        $.each(rendered_elems, ui.process_condensing);
 
         // Re-add the fading of messages that is lost when we re-render.
         compose.update_faded_messages();
diff --git a/zephyr/static/js/narrow.js b/zephyr/static/js/narrow.js
index 33564fab09..fc3060650c 100644
--- a/zephyr/static/js/narrow.js
+++ b/zephyr/static/js/narrow.js
@@ -418,7 +418,7 @@ exports.activate = function (operators, opts) {
     // above us could change size -- which is problematic, because it
     // could cause us to lose our position. But doing this here, right
     // after showing the table, seems to cause us to win the race.
-    $("tr.message_row").each(ui.process_collapsing);
+    $("tr.message_row").each(ui.process_condensing);
 
     reset_load_more_status();
     if (! defer_selecting_closest) {
diff --git a/zephyr/static/js/ui.js b/zephyr/static/js/ui.js
index a428227b10..8b7f5b376a 100644
--- a/zephyr/static/js/ui.js
+++ b/zephyr/static/js/ui.js
@@ -919,16 +919,16 @@ $(function () {
 
     $("#home").on("click", ".message_expander", function (e) {
         var row = $(this).closest(".message_row");
-        current_msg_list.get(rows.id(row)).expanded = true;
-        row.find(".message_content").addClass("expanded");
+        current_msg_list.get(rows.id(row)).condensed = false;
+        row.find(".message_content").removeClass("condensed");
         $(this).hide();
-        row.find(".message_collapser").show();
+        row.find(".message_condenser").show();
     });
 
-    $("#home").on("click", ".message_collapser", function (e) {
+    $("#home").on("click", ".message_condenser", function (e) {
         var row = $(this).closest(".message_row");
-        current_msg_list.get(rows.id(row)).expanded = false;
-        row.find(".message_content").removeClass("expanded");
+        current_msg_list.get(rows.id(row)).condensed = true;
+        row.find(".message_content").addClass("condensed");
         $(this).hide();
         row.find(".message_expander").show();
     });
@@ -1338,38 +1338,28 @@ exports.restore_compose_cursor = function () {
         .caret(saved_compose_cursor, saved_compose_cursor);
 };
 
-exports.process_collapsing = function (index, elem) {
-    var content = $(elem).find(".message_content")[0];
+exports.process_condensing = function (index, elem) {
+    var content = $(elem).find(".message_content");
     var message = current_msg_list.get(rows.id($(elem)));
     if (content !== undefined && message !== undefined) {
-        // If message.expanded is defined, then the user has manually
-        // specified whether this message should be expanded or collapsed.
-        if (message.expanded === true) {
-            $(content).addClass("expanded");
-            $(elem).find(".message_collapser").show();
-            $(elem).find(".message_expander").hide();
-            return;
-        } else if (message.expanded === false) {
-            $(content).removeClass("expanded");
+        // If message.condensed is defined, then the user has manually
+        // specified whether this message should be expanded or condensed.
+        if (message.condensed === true) {
+            content.addClass("condensed");
             $(elem).find(".message_expander").show();
-            $(elem).find(".message_collapser").hide();
+            $(elem).find(".message_condenser").hide();
+            return;
+        } else if (message.condensed === false) {
+            content.removeClass("condensed");
+            $(elem).find(".message_condenser").show();
+            $(elem).find(".message_expander").hide();
             return;
         }
 
-        // We've limited the height of all elements in CSS.
-        // If offsetHeight < scrollHeight, then our CSS height limit has taken
-        // effect and we should show an expander button.
-        // If offsetHeight is only slightly smaller than scrollHeight, then we
-        // would only be collapsing by a small amount, which can be annoying.
-        // Instead of showing an expander button, just expand that element instead
-        // of keeping it collapsed.  (This also solves a bug seen on some Mac
-        // systems where offsetHeight == scrollHeight-1 for no apparent reason).
-        if (content.offsetHeight === 0 && content.scrollHeight === 0) {
-            return;
-        } else if (content.offsetHeight + 250 < content.scrollHeight) {
+        // Collapse the message if it takes up more than a certain % of the screen
+        if (content.height() > (viewport.height() * 0.65 ) ) {
+            content.addClass("condensed");
             $(elem).find(".message_expander").show();
-        } else if (content.offsetHeight < content.scrollHeight) {
-            $(content).addClass("expanded");
         }
     }
 };
diff --git a/zephyr/static/styles/zephyr.css b/zephyr/static/styles/zephyr.css
index 1291d85286..c617a2cb84 100644
--- a/zephyr/static/styles/zephyr.css
+++ b/zephyr/static/styles/zephyr.css
@@ -451,9 +451,6 @@ table.focused_table {
 .message_content {
     margin-left: 5px;
     margin-right: 35px; /* size of the timestamp */
-    line-height: 1.5em;
-    max-height: 9.0em;
-    overflow: hidden;
 }
 @media (max-width: 480px) {
     .message_content {
@@ -461,8 +458,9 @@ table.focused_table {
     }
 }
 
-.message_content.expanded {
-    max-height: none;
+.message_content.condensed {
+    max-height: 8.5em;
+    overflow: hidden;
 }
 
 .message_length_controller {
diff --git a/zephyr/static/templates/message.handlebars b/zephyr/static/templates/message.handlebars
index 721df3b83b..95876ba980 100644
--- a/zephyr/static/templates/message.handlebars
+++ b/zephyr/static/templates/message.handlebars
@@ -86,7 +86,7 @@
         </div>
         <div class="message_content">{{#if ../../use_match_properties}}{{{match_content}}}{{else}}{{{content}}}{{/if}}</div>
         <div class="message_expander message_length_controller" title="See the rest of this message">[More...]</div>
-        <div class="message_collapser message_length_controller" title="Make this message take up less space on the screen">[Collapse this message]</div>
+        <div class="message_condenser message_length_controller" title="Make this message take up less space on the screen">[Collapse this message]</div>
     </td>
 </tr>
 {{/with}}