properly merge multiple class names

components/CodeBlock/CodeBlock.module.css

@@ -1,6 +1,7 @@
 /* all code */
 .code {
   font-size: 0.925em;
+  tab-size: 2;
   page-break-inside: avoid;
   border: 1px solid var(--kinda-light);
 }
@@ -16,13 +17,26 @@
   margin: 1em auto;
 }
 
+.block .copy_btn {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 0.65em;
+  color: var(--medium-dark);
+  background-color: var(--background-inner);
+  border: 1px solid var(--kinda-light);
+}
+
+.block .copy_btn:hover {
+  color: var(--link);
+}
+
 /* the following sub-classes MUST be global -- the highlight rehype plugin isn't aware of this file */
 
 .block :global(.code-highlight) {
   display: block;
   overflow-x: auto;
   padding: 1em;
-  tab-size: 2;
   color: var(--code-text);
   background-color: var(--code-background);
 }

components/CodeBlock/CodeBlock.tsx

@@ -1,3 +1,4 @@
+import classNames from "classnames";
 import CopyButton from "../CopyButton/CopyButton";
 import type { ReactNode } from "react";
 
@@ -13,15 +14,15 @@ const CodeBlock = (props: Props) => {
     // full multi-line code blocks with prism highlighting and copy-to-clipboard button
     return (
       <div className={styles.block}>
-        <CopyButton source={props.children} />
-        <code {...props} className={`${styles.code} ${props.className}`}>
+        <CopyButton source={props.children} className={styles.copy_btn} />
+        <code {...props} className={classNames(styles.code, props.className)}>
           {props.children}
         </code>
       </div>
     );
   } else {
     // inline code in paragraphs, headings, etc. (not highlighted)
-    return <code className={`${styles.code} ${styles.inline}`}>{props.children}</code>;
+    return <code className={classNames(styles.code, styles.inline)}>{props.children}</code>;
   }
 };