diff --git a/zephyr/static/js/viewport.js b/zephyr/static/js/viewport.js
index b8807ef5a9..41e9ade5f8 100644
--- a/zephyr/static/js/viewport.js
+++ b/zephyr/static/js/viewport.js
@@ -22,17 +22,33 @@ exports.at_bottom = function () {
     return bottom + 2 >= window_size;
 };
 
-exports.set_message_position = function (message_top, viewport_info, ratio) {
+exports.set_message_position = function (message_top, message_height, viewport_info, ratio) {
     // message_top = offset of the top of a message that you are positioning
+    // message_height = height of the message that you are positioning
     // viewport_info = result of calling ui.message_viewport_info
     // ratio = fraction indicating how far down the screen the msg should be
 
+    var how_far_down_in_visible_page = viewport_info.visible_height * ratio;
+
+    // special case: keep large messages fully on the screen
+    if (how_far_down_in_visible_page + message_height > viewport_info.visible_height) {
+        how_far_down_in_visible_page = viewport_info.visible_height - message_height;
+
+        // Next handle truly gigantic messages.  We just say that the top of the
+        // message goes to the top of the viewing area.  Realistically, gigantic
+        // messages should either be condensed, socially frowned upon, or scrolled
+        // with the mouse.
+        if (how_far_down_in_visible_page < 0) {
+            how_far_down_in_visible_page = 0;
+        }
+    }
+
     var hidden_top =
         viewport_info.visible_top
         - jwindow.scrollTop();
 
     var message_offset =
-        viewport_info.visible_height * ratio
+        how_far_down_in_visible_page
         + hidden_top;
 
     var new_scroll_top =
diff --git a/zephyr/static/js/zephyr.js b/zephyr/static/js/zephyr.js
index df4c340786..c0c0096cc2 100644
--- a/zephyr/static/js/zephyr.js
+++ b/zephyr/static/js/zephyr.js
@@ -92,7 +92,9 @@ function recenter_view(message, from_scroll) {
     var bottom_threshold = viewport_info.visible_top + viewport_info.visible_height;
 
     var message_top = message.offset().top;
-    var message_bottom = message_top + message.outerHeight(true);
+    var message_height = message.outerHeight(true);
+    var message_bottom = message_top + message_height;
+
     var is_above = message_top < top_threshold;
     var is_below = message_bottom > bottom_threshold;
 
@@ -111,9 +113,9 @@ function recenter_view(message, from_scroll) {
     }
 
     if (is_above) {
-        viewport.set_message_position(message_top, viewport_info, 1/2);
+        viewport.set_message_position(message_top, message_height, viewport_info, 1/2);
     } else if (is_below) {
-        viewport.set_message_position(message_top, viewport_info, 1/7);
+        viewport.set_message_position(message_top, message_height, viewport_info, 1/7);
     }
 }