diff --git a/web/src/compose_validate.ts b/web/src/compose_validate.ts
index ebb279da34d12..eb41fdd54dbbc 100644
--- a/web/src/compose_validate.ts
+++ b/web/src/compose_validate.ts
@@ -66,7 +66,7 @@ function update_send_button_status(): void {
 
 export function get_disabled_send_tooltip(): string {
     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."});
     }
@@ -689,6 +689,7 @@ export function check_overflow_text(): number {
     // expensive.
     const text = compose_state.message_content();
     const max_length = realm.max_message_length;
+    const remaining_length = max_length - text.length;
     const $indicator = $("#compose-limit-indicator");
 
     if (text.length > max_length) {
@@ -696,8 +697,7 @@ export function check_overflow_text(): number {
         $("textarea#compose-textarea").addClass("over_limit");
         $indicator.html(
             render_compose_limit_indicator({
-                text_length: text.length,
-                max_length,
+                remaining_length,
             }),
         );
         compose_banner.show_error_message(
@@ -711,14 +711,14 @@ export function check_overflow_text(): number {
             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,
-                max_length,
+                remaining_length,
             }),
         );
         set_message_too_long(false);
diff --git a/web/templates/compose_limit_indicator.hbs b/web/templates/compose_limit_indicator.hbs
index 6fe0baf92bcd3..39ff8589504b2 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 2e1688a3eb0ff..1d7f041442eb4 100644
--- a/web/tests/compose_validate.test.js
+++ b/web/tests/compose_validate.test.js
@@ -546,7 +546,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"));
@@ -556,7 +556,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);