Repository: streamlit/streamlit
Pull request: Copy-to-clipboard button is showing at wrong place
**Issue:** This PR fixes #581 

**Description:** Added a div that contains both elements

---

**Contribution License Agreement**

By submiting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.


Problem statement:
Copy-to-clipboard button is showing at wrong place
Steps to repro:

    st.markdown("""
    Some text.

    Some text.

    Some text.

    Some text.

    Some text.

    Some text.

    Some text.

    Some text.

    Some text.

    Some text.

    Some text.

    Some text.

    ```
    Some code
    ```
    """)


The button should be next to the code box.

Hints from issue discussion:

Commit message: Fixing button alignment inside alerts and margins

Patch to review:
diff --git a/frontend/src/components/elements/CodeBlock/CodeBlock.scss b/frontend/src/components/elements/CodeBlock/CodeBlock.scss
index dbdff1935672..c70f42d712b0 100644
--- a/frontend/src/components/elements/CodeBlock/CodeBlock.scss
+++ b/frontend/src/components/elements/CodeBlock/CodeBlock.scss
@@ -21,6 +21,10 @@
   See https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript
 */
 
+div.code-block {
+  margin: 0 0 1rem 0;
+}
+
 .token.comment,
 .token.prolog,
 .token.doctype,
diff --git a/frontend/src/components/elements/CodeBlock/CodeBlock.tsx b/frontend/src/components/elements/CodeBlock/CodeBlock.tsx
index d192933418b8..2336b36b1455 100644
--- a/frontend/src/components/elements/CodeBlock/CodeBlock.tsx
+++ b/frontend/src/components/elements/CodeBlock/CodeBlock.tsx
@@ -45,12 +45,12 @@ class CodeBlock extends React.PureComponent<Props> {
   public render(): React.ReactNode {
     if (this.props.language == null) {
       return (
-        <>
+        <div className="code-block">
           <CopyButton text={this.props.value} />
-          <pre className={"code-block"}>
+          <pre>
             <code>{this.props.value}</code>
           </pre>
-        </>
+        </div>
       )
     }
 
@@ -68,15 +68,15 @@ class CodeBlock extends React.PureComponent<Props> {
       : ""
     const languageClassName = `language-${this.props.language}`
     return (
-      <>
+      <div className="code-block">
         <CopyButton text={this.props.value} />
-        <pre className={"code-block"}>
+        <pre>
           <code
             className={languageClassName}
             dangerouslySetInnerHTML={{ __html: safeHtml }}
           />
         </pre>
-      </>
+      </div>
     )
   }
 }
diff --git a/frontend/src/components/elements/Text/Text.scss b/frontend/src/components/elements/Text/Text.scss
index 07fe9e2d6dea..bab629120001 100644
--- a/frontend/src/components/elements/Text/Text.scss
+++ b/frontend/src/components/elements/Text/Text.scss
@@ -89,5 +89,12 @@
       color: inherit;
       text-decoration: underline;
     }
+
+    div.code-block {
+      button.overlayBtn {
+        top: 0;
+        right: 0;
+      }
+    }
   }
 }


Code review comments:
diff_hunk: @@ -21,6 +21,10 @@
   See https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript
 */
 
+div.code-block {
+  margin: 0 0 1rem 0;
+}
path: frontend/src/components/elements/CodeBlock/CodeBlock.scss
text: @user1:
Why is this needed?

@author:
the snapshot was failing due to this, because the div has no margin

diff_hunk: @@ -45,12 +45,12 @@ class CodeBlock extends React.PureComponent<Props> {
   public render(): React.ReactNode {
     if (this.props.language == null) {
       return (
-        <>
+        <div className="code-block">
path: frontend/src/components/elements/CodeBlock/CodeBlock.tsx
text: @user1:
Can you change this to `stCodeBlock`? This is the pattern we use everywhere else