feat: use HTML button element for copying to clipboard (#2720)

It's much more semantic to use the `<button />` HTML component rather
than trying to build the same functionality out of a `<div />` so that's
what is updated here.

This also updates some of the classes that were on the button as they're
no longer required and removes some commented out code that doesn't need
to be left around.

There was also a `<span />` with the contents "Copy" that I couldn't
work out when it was meant to be displayed, so I swapped that over to an
HTML tooltip on the `<button />`.

frontend/src/components/ui/code-copy-button.tsx

@@ -37,10 +37,6 @@ export default function CodeCopyButton({
         );
       }, 500);
     }
-
-    // toast.success(`copied ${type} to clipboard`, {
-    //   icon: <ClipboardCheck className="h-4 w-4" />,
-    // });
   };
 
   return (
@@ -49,17 +45,17 @@ export default function CodeCopyButton({
         <div className="overflow-x-auto whitespace-pre-wrap text-nowrap break-all pr-4 text-sm">
           {!isMobile && children ? children : "Copy install command"}
         </div>
-        <div
+        <button
-          className={cn(" right-0 cursor-pointer bg-muted px-3 py-4")}
           onClick={() => handleCopy("install command", children)}
+          className={cn("bg-muted px-3 py-4")}
+          title="Copy"
         >
           {hasCopied ? (
             <CheckIcon className="h-4 w-4" />
           ) : (
             <ClipboardIcon className="h-4 w-4" />
           )}
-          <span className="sr-only">Copy</span>
+        </button>
-        </div>
       </Card>
     </div>
   );