From 84f22440dd3356c86b41445ab8c4543ecb88d4e6 Mon Sep 17 00:00:00 2001
From: Aman Agrawal <amanagr@zulip.com>
Date: Tue, 9 Jul 2024 08:01:46 +0000
Subject: [PATCH] rendered_markdown: Fix text wrapping in message view header.

For elements that can wrap in a rendered markdown, we don't want them
to in places like message view header.
---
 web/styles/rendered_markdown.css      | 10 ++++++++++
 web/templates/message_view_header.hbs |  4 ++--
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/web/styles/rendered_markdown.css b/web/styles/rendered_markdown.css
index 4166a05813..b37c784107 100644
--- a/web/styles/rendered_markdown.css
+++ b/web/styles/rendered_markdown.css
@@ -952,3 +952,13 @@
 .highlight {
     background-color: hsl(51deg 100% 79%);
 }
+
+/* For elements where we want to show as much markdown content we can
+   in a single line and then hide the overflowing part. */
+.single-line-rendered-markdown {
+    /* Any element which can `wrap` in the above defined elements. */
+    code,
+    .stream-topic {
+        white-space: nowrap;
+    }
+}
diff --git a/web/templates/message_view_header.hbs b/web/templates/message_view_header.hbs
index 9fe49b991a..9a4014aaba 100644
--- a/web/templates/message_view_header.hbs
+++ b/web/templates/message_view_header.hbs
@@ -12,7 +12,7 @@
         {{/unless}}
     </div>
 </template>
-<span class="narrow_description rendered_markdown">
+<span class="narrow_description rendered_markdown single-line-rendered-markdown">
     {{#if rendered_narrow_description}}
     {{rendered_markdown rendered_narrow_description}}
     {{else}}
@@ -28,7 +28,7 @@
     {{> navbar_icon_and_title }}
 </span>
 {{#if description}}
-    <span class="narrow_description rendered_markdown">{{description}}
+    <span class="narrow_description rendered_markdown single-line-rendered-markdown">{{description}}
         {{#if link}}
         <a class="help_link_widget" href="{{link}}" target="_blank" rel="noopener noreferrer">
             <i class="fa fa-question-circle-o" aria-hidden="true"></i>