diff --git a/templates/zerver/app/index.html b/templates/zerver/app/index.html
index d44b6dfff3..0d5f13afa0 100644
--- a/templates/zerver/app/index.html
+++ b/templates/zerver/app/index.html
@@ -226,7 +226,7 @@
                         </div>
                         <div id="typing_notifications">
                         </div>
-                        <div id="mark_as_read_turned_off_banner" class="alert home-error-bar">
+                        <div id="mark_read_on_scroll_state_banner">
                         </div>
                         <div id="bottom_whitespace">
                         </div>
diff --git a/web/src/unread_ui.js b/web/src/unread_ui.js
index 9a267d5a14..04a71a1c9f 100644
--- a/web/src/unread_ui.js
+++ b/web/src/unread_ui.js
@@ -27,16 +27,17 @@ export function update_unread_banner() {
         user_settings.web_mark_read_on_scroll_policy ===
         web_mark_read_on_scroll_policy_values.never.code
     ) {
-        $("#mark_as_read_turned_off_banner").html(render_mark_as_read_disabled_banner());
+        $("#mark_read_on_scroll_state_banner").html(render_mark_as_read_disabled_banner());
     } else if (
         user_settings.web_mark_read_on_scroll_policy ===
             web_mark_read_on_scroll_policy_values.conversation_only.code &&
         !is_conversation_view
     ) {
-        $("#mark_as_read_turned_off_banner").html(render_mark_as_read_only_in_conversation_view());
+        $("#mark_read_on_scroll_state_banner").html(
+            render_mark_as_read_only_in_conversation_view(),
+        );
     } else {
-        $("#mark_as_read_turned_off_banner").html(render_mark_as_read_turned_off_banner());
-
+        $("#mark_read_on_scroll_state_banner").html(render_mark_as_read_turned_off_banner());
         if (message_lists.current.can_mark_messages_read_without_setting()) {
             hide_unread_banner();
         }
@@ -46,7 +47,7 @@ export function update_unread_banner() {
 export function hide_unread_banner() {
     // Use visibility instead of hide() to prevent messages on the screen from
     // shifting vertically.
-    $("#mark_as_read_turned_off_banner").toggleClass("invisible", true);
+    $("#mark_read_on_scroll_state_banner").toggleClass("invisible", true);
 }
 
 export function reset_unread_banner() {
@@ -56,7 +57,7 @@ export function reset_unread_banner() {
 
 export function notify_messages_remain_unread() {
     if (!user_closed_unread_banner) {
-        $("#mark_as_read_turned_off_banner").toggleClass("invisible", false);
+        $("#mark_read_on_scroll_state_banner").toggleClass("invisible", false);
     }
 }
 
diff --git a/web/templates/unread_banner/mark_as_read_disabled_banner.hbs b/web/templates/unread_banner/mark_as_read_disabled_banner.hbs
index 3f5804a2d0..44942400e8 100644
--- a/web/templates/unread_banner/mark_as_read_disabled_banner.hbs
+++ b/web/templates/unread_banner/mark_as_read_disabled_banner.hbs
@@ -1,12 +1,15 @@
-<p id="mark_as_read_turned_off_content">
-    {{#tr}}
-        Your Zulip app is <z-link>configured</z-link> to not mark messages as read on scroll.
-        {{#*inline "z-link"}}<a href='help/marking-messages-as-read'>{{> @partial-block}}</a>{{/inline}}
-    {{/tr}}
-</p>
-<div id="mark_as_read_controls">
-    <button id="mark_view_read" class="btn btn-warning">
-        {{t 'Mark as read' }}
-    </button>
+<div id="mark_as_read_turned_off_banner" class="alert home-error-bar">
+    <p id="mark_as_read_turned_off_content">
+        {{#tr}}
+            Your Zulip app is <z-link>configured</z-link> to not mark messages as read on scroll.
+            {{#*inline "z-link"}}<a href='help/marking-messages-as-read'>{{> @partial-block}}</a>{{/inline}}
+        {{/tr}}
+    </p>
+    <div id="mark_as_read_controls">
+        <button id="mark_view_read" class="btn btn-warning">
+            {{t 'Mark as read' }}
+        </button>
+    </div>
+    <button type="button" id="mark_as_read_close" class="close">×</button>
 </div>
-<button type="button" id="mark_as_read_close" class="close">×</button>
+
diff --git a/web/templates/unread_banner/mark_as_read_only_in_conversation_view.hbs b/web/templates/unread_banner/mark_as_read_only_in_conversation_view.hbs
index 1b99416895..8edf118d24 100644
--- a/web/templates/unread_banner/mark_as_read_only_in_conversation_view.hbs
+++ b/web/templates/unread_banner/mark_as_read_only_in_conversation_view.hbs
@@ -1,12 +1,15 @@
-<p id="mark_as_read_turned_off_content">
-    {{#tr}}
-        Your Zulip app is <z-link>configured</z-link> to mark messages as read on scroll only in conversation views.
-        {{#*inline "z-link"}}<a href='help/marking-messages-as-read'>{{> @partial-block}}</a>{{/inline}}
-    {{/tr}}
-</p>
-<div id="mark_as_read_controls">
-    <button id="mark_view_read" class="btn btn-warning">
-        {{t 'Mark as read' }}
-    </button>
+<div id="mark_as_read_turned_off_banner" class="alert home-error-bar">
+    <p id="mark_as_read_turned_off_content">
+        {{#tr}}
+            Your Zulip app is <z-link>configured</z-link> to mark messages as read on scroll only in conversation views.
+            {{#*inline "z-link"}}<a href='help/marking-messages-as-read'>{{> @partial-block}}</a>{{/inline}}
+        {{/tr}}
+    </p>
+    <div id="mark_as_read_controls">
+        <button id="mark_view_read" class="btn btn-warning">
+            {{t 'Mark as read' }}
+        </button>
+    </div>
+    <button type="button" id="mark_as_read_close" class="close">×</button>
 </div>
-<button type="button" id="mark_as_read_close" class="close">×</button>
+
diff --git a/web/templates/unread_banner/mark_as_read_turned_off_banner.hbs b/web/templates/unread_banner/mark_as_read_turned_off_banner.hbs
index 3b67a4ffb8..9e4909fd25 100644
--- a/web/templates/unread_banner/mark_as_read_turned_off_banner.hbs
+++ b/web/templates/unread_banner/mark_as_read_turned_off_banner.hbs
@@ -1,9 +1,12 @@
-<p id="mark_as_read_turned_off_content">
-    {{t 'To preserve your reading state, this view does not mark messages as read.' }}
-</p>
-<div id="mark_as_read_controls">
-    <button id="mark_view_read" class="btn btn-warning">
-        {{t 'Mark as read' }}
-    </button>
+<div id="mark_as_read_turned_off_banner" class="alert home-error-bar">
+    <p id="mark_as_read_turned_off_content">
+        {{t 'To preserve your reading state, this view does not mark messages as read.' }}
+    </p>
+    <div id="mark_as_read_controls">
+        <button id="mark_view_read" class="btn btn-warning">
+            {{t 'Mark as read' }}
+        </button>
+    </div>
+    <button type="button" id="mark_as_read_close" class="close">×</button>
 </div>
-<button type="button" id="mark_as_read_close" class="close">×</button>
+
diff --git a/web/tests/narrow_activate.test.js b/web/tests/narrow_activate.test.js
index 47b4fd78bc..4bea97c9d9 100644
--- a/web/tests/narrow_activate.test.js
+++ b/web/tests/narrow_activate.test.js
@@ -98,7 +98,7 @@ function test_helper() {
     stub(compose_closed_ui, "update_buttons_for_stream");
     stub(compose_closed_ui, "update_buttons_for_private");
     // We don't test the css calls; we just skip over them.
-    $("#mark_as_read_turned_off_banner").toggleClass = () => {};
+    $("#mark_read_on_scroll_state_banner").toggleClass = () => {};
 
     return {
         clear() {
diff --git a/web/tests/recent_topics.test.js b/web/tests/recent_topics.test.js
index aba8656cc4..48fa37fee2 100644
--- a/web/tests/recent_topics.test.js
+++ b/web/tests/recent_topics.test.js
@@ -425,7 +425,7 @@ test("test_recent_topics_show", ({mock_template, override}) => {
 
     stub_out_filter_buttons();
     // We don't test the css calls; we just skip over them.
-    $("#mark_as_read_turned_off_banner").toggleClass = () => {};
+    $("#mark_read_on_scroll_state_banner").toggleClass = () => {};
 
     rt.clear_for_tests();
     rt.process_messages(messages);