diff --git a/web/src/compose_validate.js b/web/src/compose_validate.js
index aea1050bf2ec53..ecc621a24126c7 100644
--- a/web/src/compose_validate.js
+++ b/web/src/compose_validate.js
@@ -59,7 +59,7 @@ function update_send_button_status() {
 
 export function get_disabled_send_tooltip() {
     if (message_too_long) {
-        return $t({defaultMessage: "Message length shouldn't be greater than 10000 characters."});
+        return $t({defaultMessage: "Maximum message length: 10000 characters"});
     } else if (upload_in_progress) {
         return $t({defaultMessage: "Cannot send message while files are being uploaded."});
     }
@@ -750,6 +750,7 @@ export function check_overflow_text() {
     // expensive.
     const text = compose_state.message_content();
     const max_length = realm.max_message_length;
+    const remainingCharacters = max_length - text.length;
     const $indicator = $("#compose-limit-indicator");
 
     if (text.length > max_length) {
@@ -757,7 +758,7 @@ export function check_overflow_text() {
         $("textarea#compose-textarea").addClass("over_limit");
         $indicator.html(
             render_compose_limit_indicator({
-                text_length: text.length,
+                remaining_length: remainingCharacters,
                 max_length,
             }),
         );
@@ -772,13 +773,14 @@ export function check_overflow_text() {
             compose_banner.CLASSNAMES.message_too_long,
             $("#compose_banners"),
         );
+
         set_message_too_long(true);
     } else if (text.length > 0.9 * max_length) {
         $indicator.removeClass("over_limit");
         $("textarea#compose-textarea").removeClass("over_limit");
         $indicator.html(
             render_compose_limit_indicator({
-                text_length: text.length,
+                remaining_length: remainingCharacters,
                 max_length,
             }),
         );
diff --git a/web/templates/compose_limit_indicator.hbs b/web/templates/compose_limit_indicator.hbs
index 6fe0baf92bcd3f..39ff8589504b28 100644
--- a/web/templates/compose_limit_indicator.hbs
+++ b/web/templates/compose_limit_indicator.hbs
@@ -1,2 +1,2 @@
-{{! Include a zero-width-space to allow breaks in narrow compose boxes. }}
-{{text_length}}​/{{max_length}}
+{{remaining_length}}
+
diff --git a/web/tests/compose_validate.test.js b/web/tests/compose_validate.test.js
index 28815b3ef81720..8a341a07fb4e7c 100644
--- a/web/tests/compose_validate.test.js
+++ b/web/tests/compose_validate.test.js
@@ -563,7 +563,7 @@ test_ui("test_validate_stream_message_post_policy_full_members_only", ({mock_tem
 
 test_ui("test_check_overflow_text", ({mock_template}) => {
     mock_banners();
-    realm.max_message_length = 10000;
+    page_params.max_message_length = 10000;
 
     const $textarea = $("textarea#compose-textarea");
     const $indicator = $("#compose-limit-indicator");
@@ -588,7 +588,7 @@ test_ui("test_check_overflow_text", ({mock_template}) => {
     $textarea.val("a".repeat(10000 + 1));
     compose_validate.check_overflow_text();
     assert.ok($indicator.hasClass("over_limit"));
-    assert.equal(limit_indicator_html, "10001​/10000\n");
+    assert.equal(limit_indicator_html, "-1\n\n");
     assert.ok($textarea.hasClass("over_limit"));
     assert.ok(banner_rendered);
     assert.ok($(".message-send-controls").hasClass("disabled-message-send-controls"));
@@ -598,7 +598,7 @@ test_ui("test_check_overflow_text", ({mock_template}) => {
     $textarea.val("a".repeat(9000 + 1));
     compose_validate.check_overflow_text();
     assert.ok(!$indicator.hasClass("over_limit"));
-    assert.equal(limit_indicator_html, "9001​/10000\n");
+    assert.equal(limit_indicator_html, "999\n\n");
     assert.ok(!$textarea.hasClass("over_limit"));
     assert.ok(!$(".message-send-controls").hasClass("disabled-message-send-controls"));
     assert.ok(!banner_rendered);