diff --git a/web/src/message_list_hover.ts b/web/src/message_list_hover.ts
index 1616b0618e..24bc99450e 100644
--- a/web/src/message_list_hover.ts
+++ b/web/src/message_list_hover.ts
@@ -1,8 +1,6 @@
 import $ from "jquery";
 import assert from "minimalistic-assert";
 
-import render_edit_content_button from "../templates/edit_content_button.hbs";
-
 import * as message_edit from "./message_edit.ts";
 import * as message_lists from "./message_lists.ts";
 import * as rows from "./rows.ts";
@@ -14,11 +12,13 @@ export function message_unhover(): void {
     if ($current_message_hover === undefined) {
         return;
     }
-    $current_message_hover.find(".edit_content").empty();
+    $current_message_hover.removeClass("can-edit-content can-move-message");
     $current_message_hover = undefined;
 }
 
 export function message_hover($message_row: JQuery): void {
+    // This code is performance-sensitive, so we must perform any DOM updates
+    // together. We don't want to trigger reflows multiple times.
     const id = rows.id($message_row);
     assert(message_lists.current !== undefined);
     const message = message_lists.current.get(id);
@@ -26,14 +26,11 @@ export function message_hover($message_row: JQuery): void {
 
     if ($current_message_hover && rows.id($current_message_hover) === id) {
         return;
-    } else if (message.locally_echoed) {
-        return;
     }
 
-    message_unhover();
     $current_message_hover = $message_row;
 
-    if (!message.sent_by_me) {
+    if (!message.sent_by_me || message.locally_echoed) {
         // The actions and reactions icon hover logic is handled entirely by CSS
         return;
     }
@@ -46,12 +43,20 @@ export function message_hover($message_row: JQuery): void {
         can_move_message,
     };
     const $edit_content = $message_row.find(".edit_content");
-    $edit_content.html(render_edit_content_button(args));
-
-    if (args.is_content_editable) {
+    if (args.is_content_editable && !$edit_content.hasClass("can-edit-content")) {
+        $edit_content.addClass("can-edit-content");
+        $edit_content.removeClass("can-move-message");
         $edit_content.attr("data-tooltip-template-id", "edit-content-tooltip-template");
-    } else if (args.can_move_message) {
+    } else if (
+        !args.is_content_editable &&
+        args.can_move_message &&
+        !$edit_content.hasClass("can-move-message")
+    ) {
+        $edit_content.addClass("can-move-message");
+        $edit_content.removeClass("can-edit-content");
         $edit_content.attr("data-tooltip-template-id", "move-message-tooltip-template");
+    } else if (!args.is_content_editable && !args.can_move_message) {
+        $edit_content.removeClass("can-edit-content can-move-message");
     }
 }
 
diff --git a/web/styles/message_row.css b/web/styles/message_row.css
index f4719a8b2a..c5096bd789 100644
--- a/web/styles/message_row.css
+++ b/web/styles/message_row.css
@@ -571,16 +571,28 @@
     }
 
     .edit_content {
-        /* Icons for editing content are determined on message hover;
-           we set an empty `.edit_content` to take the eventual width
-           of whatever icon is displayed, so as to avoid a grid shift. */
-        &:empty {
-            width: var(--message-box-icon-width);
-        }
+        width: var(--message-box-icon-width);
 
         &:hover {
             cursor: pointer;
         }
+
+        .move_message_button,
+        .edit_content_button {
+            display: none;
+        }
+
+        &.can-edit-content {
+            .edit_content_button {
+                display: inline;
+            }
+        }
+
+        &.can-move-message {
+            .move_message_button {
+                display: inline;
+            }
+        }
     }
 
     .failed_message_action {
diff --git a/web/templates/edit_content_button.hbs b/web/templates/edit_content_button.hbs
deleted file mode 100644
index 8cf02bc080..0000000000
--- a/web/templates/edit_content_button.hbs
+++ /dev/null
@@ -1,5 +0,0 @@
-{{#if is_content_editable}}
-<i class="message-controls-icon zulip-icon zulip-icon-edit edit_content_button edit_message_button" role="button" tabindex="0" aria-label="{{t 'Edit message' }} (e)"></i>
-{{else if can_move_message}}
-<i class="message-controls-icon zulip-icon zulip-icon-move-alt move_message_button edit_message_button" role="button" tabindex="0" aria-label="{{t 'Move message' }} (m)"></i>
-{{/if}}
diff --git a/web/templates/message_controls.hbs b/web/templates/message_controls.hbs
index 7dc8d5b30b..970a03c886 100644
--- a/web/templates/message_controls.hbs
+++ b/web/templates/message_controls.hbs
@@ -1,6 +1,9 @@
 {{#unless is_archived}}
     {{#if msg/sent_by_me}}
-        <div class="edit_content message_control_button"></div>
+        <div class="edit_content message_control_button">
+            <i class="message-controls-icon zulip-icon zulip-icon-edit edit_content_button edit_message_button" role="button" tabindex="0" aria-label="{{t 'Edit message' }} (e)"></i>
+            <i class="message-controls-icon zulip-icon zulip-icon-move-alt move_message_button edit_message_button" role="button" tabindex="0" aria-label="{{t 'Move message' }} (m)"></i>
+        </div>
     {{/if}}
 
     {{#unless msg/sent_by_me}}