Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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.
This commit is contained in:
Saubhagya Patel 2024-11-14 11:26:43 +05:30
parent 8b352ba02d
commit a3301b523a
2 changed files with 13 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
web/src/info_overlay.ts
View File

@ -278,6 +278,7 @@ export function set_up_toggler(): void {
$markdown_help.find(".rendered_markdown").each(function () { $markdown_help.find(".rendered_markdown").each(function () {
rendered_markdown.update_elements($(this)); rendered_markdown.update_elements($(this));
}); });
process_message_formatting_layout($markdown_help);
$(".informational-overlays .overlay-body").append($markdown_help); $(".informational-overlays .overlay-body").append($markdown_help);
const $search_operators = $( const $search_operators = $(
@ -359,3 +360,9 @@ export function show(target: string | undefined): void {
toggler!.goto(target); 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");
}

6
web/styles/informational_overlays.css
View File

@ -128,3 +128,9 @@
#search-operators-first-header { #search-operators-first-header {
width: 40%; width: 40%;
} }
#message-formatting {
& .preserve-message-formatting-layout {
margin-bottom: unset;
}
}