message edit: Fix edit author text overflow on images.

Fixes #9175.

frontend_tests/node_tests/templates.js

@@ -959,7 +959,7 @@ run_test('message_edit_history', () => {
     });
     var edited_message = $(html).find("div.messagebox-content");
     assert.equal(edited_message.text().trim(),
-                 "1468132659\n                Let's go to lunchdinner!\n                Edited by Alice");
+                 "1468132659\n            Let\'s go to lunchdinner!\n            Edited by Alice");
 });
 
 run_test('message_reaction', () => {

static/styles/zulip.scss

@@ -639,6 +639,10 @@ td.pointer {
     @include prefixed-transition(background-color, 1.5s, ease-in, color 1.5s ease-in);
 }
 
+#message-edit-history .message_time {
+    position: static;
+}
+
 /* The way this overrides the menus with a background-color and a high
    z-index is kinda hacky, and requires some annoying color-matching,
    but it works. */
@@ -1379,11 +1383,7 @@ div.focused_table {
 #message-edit-history .author_details {
     display: block;
     font-size: 12px;
-    vertical-align: middle;
     padding: 1px;
-    position: absolute;
-    right: -80px;
-    line-height: 20px;
     text-align: right;
 }
 
@@ -1461,6 +1461,10 @@ blockquote p {
     padding: 4px 115px 1px 10px;
 }
 
+#message-edit-history .messagebox-content {
+    padding: 0px 10px;
+}
+
 .last_message .messagebox-content {
     padding-bottom: 1px;
 }
@@ -1933,6 +1937,7 @@ nav a .no-style {
     color: hsl(0, 0%, 73%);
     text-decoration: line-through;
     background-color: hsl(7, 90%, 92%);
+    word-break: break-all;
 }
 
 #search_arrows {
@@ -2059,6 +2064,14 @@ div.floating_recipient {
     border: none !important;
 }
 
+#message-edit-history .message_inline_image {
+    height: auto;
+    overflow-y: auto;
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+    margin: 0px;
+}
+
 .message_inline_ref {
     margin-bottom: 5px;
     margin-left: 5px;
@@ -2076,6 +2089,10 @@ div.floating_recipient {
     margin-right: 10px;
 }
 
+#message-edit-history .message_inline_image img {
+    max-height: 100px;
+}
+
 li .message_inline_image img {
     float: none;
 }

static/templates/message_edit_history.handlebars

@@ -4,7 +4,6 @@
     {{#if show_date_row}}
     <div class="date_row"><span>{{ display_date }}</span></div>
     {{/if}}
-    <div class="">
     <div class="messagebox-border">
         <div class="messagebox-content">
             <div class="message_top_line"><span class="message_time">{{ timestamp }}</span></div>
@@ -12,6 +11,5 @@
             <div class="message_author"><div class="author_details">{{ posted_or_edited }} {{ edited_by }}</div></div>
         </div>
     </div>
-    </div>
     <hr/>
 {{/each}}