fix: better copy code experience

src/components/mdx/components/code.tsx

@@ -56,8 +56,13 @@ export const Code: React.FC<
     const CopyIcon = hasCopied ? ClipboardCheckIcon : BaseCopyIcon;
 
     return (
-      <Box position="relative" {...bind}>
+      <Box overflow="hidden" position="relative" {...bind}>
-        <Box className={lines <= 3 ? 'no-line-numbers' : ''} ref={ref as any} overflowX="auto">
+        <Box
+          className={lines <= 3 ? 'no-line-numbers' : ''}
+          position="relative"
+          ref={ref as any}
+          overflowX="auto"
+        >
           <Box
             as="code"
             css={css({
@@ -100,7 +105,25 @@ export const Code: React.FC<
             {...rest}
           >
             <Box height="16px" width="100%" />
+            <Box
+              as="span"
+              position="absolute"
+              color="transparent"
+              top="16px"
+              left={lines <= LINE_MINIMUM || lang === 'bash' ? '20px' : '58px'}
+              zIndex={99}
+            >
+              {codeString}
+            </Box>
+            <Box
+              as="span"
+              style={{
+                userSelect: 'none',
+                pointerEvents: 'none',
+              }}
+            >
               {children}
+            </Box>
             <Box height="16px" width="100%" />
           </Box>
         </Box>
@@ -116,6 +139,9 @@ export const Code: React.FC<
             px={space('base')}
             py={lines === 1 ? '10px' : space('base')}
             display={['none', 'none', 'flex']}
+            style={{
+              pointerEvents: 'none',
+            }}
           >
             <IconButton
               title="Copy to clipboard"
@@ -127,6 +153,9 @@ export const Code: React.FC<
               }}
               color={themeColor('ink.400')}
               onClick={onCopy}
+              style={{
+                pointerEvents: 'all',
+              }}
             >
               <CopyIcon size="20px" />
             </IconButton>