fixed floating copy button and position it on top of code block

nlkitai · Jun 26, 2024 · 4e2406b · 4e2406b
1 parent fff5780
commit 4e2406b
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git a/packages/css/themes/src/common/components/Message.css b/packages/css/themes/src/common/components/Message.css
@@ -30,8 +30,7 @@
         font-size: var(--nlux-cdBlk--ftSz);
 
         position: relative;
-        overflow: scroll;
-        padding: 10px 0;
+        max-width: 100%;
 
         color: var(--nlux-cdBlk--txtClr);
         border: var(--nlux-cdBlk--brdrWd) solid var(--nlux-cdBlk--brdClr);
@@ -40,7 +39,9 @@
     }
 
     > .code-block > pre {
-        width: fit-content;
+        overflow: auto;
+        padding: 10px 0;
+        width: 100%;
         min-width: 100%;
     }
 
@@ -53,7 +54,9 @@
     }
 
     button.nlux-comp-copyButton {
-        position: relative;
+        position: absolute;
+        top:5px;
+        right:0;
         z-index: 888888;
         width: var(--nlux-cdBlk-cpBtn--wd);
 
@@ -62,7 +65,7 @@
         margin-left: auto;
 
         padding: var(--nlux-cdBlk-cpBtn--pdng);
-
+        
         cursor: pointer;
         color: var(--nlux-cdBlk-cpBtn--txtClr);
         border: var(--nlux-cdBlk-cpBtn--brdrWd) solid var(--nlux-cdBlk-cpBtn--brdClr);

diff --git a/packages/shared/src/markdown/copyToClipboard/insertCopyToClipboardButton.ts b/packages/shared/src/markdown/copyToClipboard/insertCopyToClipboardButton.ts
@@ -21,6 +21,6 @@ export const insertCopyToClipboardButton = (markdownContainer: HTMLElement) => {
         copyIcon.classList.add('icon-copy');
         copyButton.appendChild(copyIcon);
 
-        codeBlockContainer.insertAdjacentElement('beforebegin', copyButton);
+        codeBlockContainer.appendChild(copyButton);
     });
 };