From a3301b523a6580e04f5e4814e926db0b259e637b Mon Sep 17 00:00:00 2001
From: Saubhagya Patel <patelsaubhagya0144@gmail.com>
Date: Thu, 14 Nov 2024 11:26:43 +0530
Subject: [PATCH] popovers: Fix layout of Message Formatting section.

This commit introduces the "preserve-message-formatting-layout" class to
resolve layout inconsistencies in the Message Formatting section of the
help modal. A function applies this class dynamically to block-level
rendered markdown elements, setting the bottom margin to zero and
fixing layout issues.

Fixes: #30781.
---
 web/src/info_overlay.ts               | 7 +++++++
 web/styles/informational_overlays.css | 6 ++++++
 2 files changed, 13 insertions(+)

diff --git a/web/src/info_overlay.ts b/web/src/info_overlay.ts
index 1f88845758..9505929ad8 100644
--- a/web/src/info_overlay.ts
+++ b/web/src/info_overlay.ts
@@ -278,6 +278,7 @@ export function set_up_toggler(): void {
     $markdown_help.find(".rendered_markdown").each(function () {
         rendered_markdown.update_elements($(this));
     });
+    process_message_formatting_layout($markdown_help);
     $(".informational-overlays .overlay-body").append($markdown_help);
 
     const $search_operators = $(
@@ -359,3 +360,9 @@ export function show(target: string | undefined): void {
         toggler!.goto(target);
     }
 }
+
+function process_message_formatting_layout($rendered_html: JQuery): void {
+    $rendered_html
+        .find("p, ul, ol, pre, blockquote")
+        .addClass("preserve-message-formatting-layout");
+}
diff --git a/web/styles/informational_overlays.css b/web/styles/informational_overlays.css
index c18ffe6b96..2771779638 100644
--- a/web/styles/informational_overlays.css
+++ b/web/styles/informational_overlays.css
@@ -128,3 +128,9 @@
 #search-operators-first-header {
     width: 40%;
 }
+
+#message-formatting {
+    & .preserve-message-formatting-layout {
+        margin-bottom: unset;
+    }
+}