fix: make copy buttons copy again (#2379)

<!-- Please make sure there is an issue that this PR is correlated to. -->

Closes FRONT-684

## Changes

<!-- If there are frontend changes, please include screenshots. -->

Author: jog1t

frontend/packages/components/src/mdx/code-buttons.tsx

@@ -11,8 +11,12 @@ import { toast } from "sonner";
 export const CopyCodeTrigger = forwardRef<HTMLElement, PropsWithChildren>(
 	({ children }, ref) => {
 		const handleClick: MouseEventHandler = (event) => {
+			const codeGroup = event.currentTarget.closest("[data-code-group]");
+
 			const code =
-				event.currentTarget.closest<HTMLDivElement>(".code")?.innerText;
+				codeGroup?.querySelector("[data-state=active] .code")
+					?.textContent ||
+				codeGroup?.querySelector(".code")?.textContent;
 
 			if (!code) {
 				toast.error("No code to copy");

frontend/packages/components/src/mdx/code.tsx

@@ -51,6 +51,7 @@ export function CodeGroup({ children, className }: CodeGroupProps) {
 				"code-group group my-4 rounded-md border pt-2",
 				className,
 			)}
+			data-code-group
 		>
 			<Tabs defaultValue={getChildIdx(children[0])}>
 				<div className="flex gap-1 border-b pr-2">
@@ -119,15 +120,18 @@ export const pre = ({
 	isInGroup,
 }: PreProps) => {
 	return (
-		<div className="not-prose my-4 rounded-md border group-[.code-group]:my-0 group-[.code-group]:-mt-2 group-[.code-group]:border-none">
+		<div
+			className="not-prose my-4 rounded-md border group-[.code-group]:my-0 group-[.code-group]:-mt-2 group-[.code-group]:border-none"
+			data-code-group
+		>
 			{!file && isInGroup ? null : (
 				<div className="text-foreground flex items-center justify-between gap-2 border-b p-2 text-xs">
 					<div className="text-muted-foreground flex items-center gap-1">
 						{file ? (
-							<>
-								<Icon icon={faFile} className="block" />
+							<Badge variant="outline">
+								<Icon icon={faFile} className="mr-1" />
 								<span>{file}</span>
-							</>
+							</Badge>
 						) : isInGroup ? null : (
 							<Badge variant="outline">
 								{title || languageNames[language || "cpp"]}