fix: googleTranslate breaks sandboxes (#3984)

Author: shrirambalaji

src/components/MDX/CodeBlock/CodeBlock.tsx

@@ -79,6 +79,7 @@ const CodeBlock = React.forwardRef(
     const decorators = getDecoratedLineInfo();
     return (
       <div
+        translate="no"
         className={cn(
           'rounded-lg h-full w-full overflow-x-auto flex items-center bg-white shadow-lg',
           !noMargin && 'my-8'

src/components/MDX/ConsoleBlock.tsx

@@ -43,7 +43,7 @@ function ConsoleBlock({level = 'info', children}: ConsoleBlockProps) {
   }
 
   return (
-    <div className="mb-4">
+    <div className="mb-4" translate="no">
       <div
         className="flex w-full rounded-t-lg"
         style={{backgroundColor: '#DADEE0'}}>

src/components/MDX/Sandpack/CustomPreset.tsx

@@ -73,6 +73,7 @@ export function CustomPreset({
             />
             {isExpandable && (
               <button
+                translate="yes"
                 className="flex text-base justify-between dark:border-card-dark bg-wash dark:bg-card-dark items-center z-10 rounded-t-none p-1 w-full order-2 xl:order-last border-b-1 relative top-0"
                 onClick={() => setIsExpanded((prevExpanded) => !prevExpanded)}>
                 <span className="flex p-2 focus:outline-none text-primary dark:text-primary-dark">

src/components/MDX/Sandpack/NavigationBar.tsx

@@ -46,7 +46,9 @@ export function NavigationBar({
       <div className="px-4 lg:px-6">
         {dropdownActive ? <FilesDropdown /> : <FileTabs />}
       </div>
-      <div className="px-3 flex items-center justify-end flex-grow text-right">
+      <div
+        className="px-3 flex items-center justify-end flex-grow text-right"
+        translate="yes">
         {showDownload && <DownloadButton />}
         <ResetButton onReset={onReset} />
         <OpenInCodeSandboxButton className="ml-2 md:ml-4" />

src/components/MDX/Sandpack/index.tsx

@@ -133,7 +133,7 @@ function Sandpack(props: SandpackProps) {
   }
 
   return (
-    <div className="my-8">
+    <div className="my-8" translate="no">
       <SandpackProvider
         key={key}
         template="react"