From 8b35999ab96e83bc80266816dd4e172e541b5eeb Mon Sep 17 00:00:00 2001
From: Shriram Balaji <shrirambalaji1996@gmail.com>
Date: Sat, 23 Oct 2021 13:06:43 +0530
Subject: [PATCH] fix: googleTranslate breaks sandboxes

---
 src/components/MDX/CodeBlock/CodeBlock.tsx    | 1 +
 src/components/MDX/ConsoleBlock.tsx           | 2 +-
 src/components/MDX/Sandpack/CustomPreset.tsx  | 1 +
 src/components/MDX/Sandpack/NavigationBar.tsx | 4 +++-
 src/components/MDX/Sandpack/index.tsx         | 2 +-
 5 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/MDX/CodeBlock/CodeBlock.tsx b/src/components/MDX/CodeBlock/CodeBlock.tsx
index bb14a736a87..55d5e069901 100644
--- a/src/components/MDX/CodeBlock/CodeBlock.tsx
+++ b/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'
diff --git a/src/components/MDX/ConsoleBlock.tsx b/src/components/MDX/ConsoleBlock.tsx
index b2d1cf04cf5..810ab5d7ace 100644
--- a/src/components/MDX/ConsoleBlock.tsx
+++ b/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'}}>
diff --git a/src/components/MDX/Sandpack/CustomPreset.tsx b/src/components/MDX/Sandpack/CustomPreset.tsx
index a21ee761211..9772c0a162e 100644
--- a/src/components/MDX/Sandpack/CustomPreset.tsx
+++ b/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">
diff --git a/src/components/MDX/Sandpack/NavigationBar.tsx b/src/components/MDX/Sandpack/NavigationBar.tsx
index d11a8408ffd..c42197c0f45 100644
--- a/src/components/MDX/Sandpack/NavigationBar.tsx
+++ b/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" />
diff --git a/src/components/MDX/Sandpack/index.tsx b/src/components/MDX/Sandpack/index.tsx
index 9eea6c62441..3cfa4ebd67a 100644
--- a/src/components/MDX/Sandpack/index.tsx
+++ b/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"