markdown: Ensure code block copy button stays in the right spot (#26074)

Marshall Bowers created 10 months ago

This PR makes it so the copy button on Markdown code blocks stays
absolutely positioned even when scrolled:

<img width="1297" alt="Screenshot 2025-03-04 at 5 28 48 PM"
src="https://github.com/user-attachments/assets/b0d0fae9-ccd6-43c1-bef3-44d8d3c3e669"
/>

We achieve this by inserting a new parent element around both the copy
button and the code block itself so we can position the copy button
absolutely within that element.

Release Notes:

- N/A

Change summary

crates/markdown/src/markdown.rs | 14 ++++++++++----
1 file changed, 10 insertions(+), 4 deletions(-)

Detailed changes

crates/markdown/src/markdown.rs

@@ -611,6 +611,9 @@ impl Element for MarkdownElement {
                                 None
                             };
 
+                            // This is a parent container that we can position the copy button inside.
+                            builder.push_div(div().relative().w_full(), range, markdown_end);
+
                             let mut code_block = div()
                                 .id(("code-block", range.start))
                                 .rounded_lg()
@@ -750,6 +753,12 @@ impl Element for MarkdownElement {
                     MarkdownTagEnd::CodeBlock => {
                         builder.trim_trailing_newline();
 
+                        builder.pop_div();
+                        builder.pop_code_block();
+                        if self.style.code_block.text.is_some() {
+                            builder.pop_text_style();
+                        }
+
                         if self.markdown.read(cx).options.copy_code_block_buttons {
                             builder.flush_text();
                             builder.modify_current_div(|el| {
@@ -792,11 +801,8 @@ impl Element for MarkdownElement {
                             });
                         }
 
+                        // Pop the parent container.
                         builder.pop_div();
-                        builder.pop_code_block();
-                        if self.style.code_block.text.is_some() {
-                            builder.pop_text_style();
-                        }
                     }
                     MarkdownTagEnd::HtmlBlock => builder.pop_div(),
                     MarkdownTagEnd::List(_) => {