fix(v2): make code blocks scrollable (#2241)

* wip

* fix(v2): make code blocks scrollable

Co-authored-by: Yangshun Tay <tay.yang.shun@gmail.com>

packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.js

@@ -109,11 +109,17 @@ export default ({
       code={children.trim()}
       language={language}>
       {({className, style, tokens, getLineProps, getTokenProps}) => (
-        <div className={styles.codeBlockWrapper}>
-          <pre
-            ref={target}
-            className={classnames(className, styles.codeBlock)}
-            style={style}>
+        <pre className={classnames(className, styles.codeBlock)}>
+          <button
+            ref={button}
+            type="button"
+            aria-label="Copy code to clipboard"
+            className={styles.copyButton}
+            onClick={handleCopyCode}>
+            {showCopied ? 'Copied' : 'Copy'}
+          </button>
+
+          <code ref={target} className={styles.codeBlockLines} style={style}>
             {tokens.map((line, i) => {
               const lineProps = getLineProps({line, key: i});
 
@@ -129,16 +135,8 @@ export default ({
                 </div>
               );
             })}
-          </pre>
-          <button
-            ref={button}
-            type="button"
-            aria-label="Copy code to clipboard"
-            className={styles.copyButton}
-            onClick={handleCopyCode}>
-            {showCopied ? 'Copied' : 'Copy'}
-          </button>
-        </div>
+          </code>
+        </pre>
       )}
     </Highlight>
   );

packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/styles.module.css

@@ -1,18 +1,15 @@
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 .codeBlock {
-  font-size: inherit;
-  margin-bottom: 0;
-  overflow: hidden;
-  overflow-wrap: break-word;
-  white-space: pre-wrap;
-}
-
-.codeBlockWrapper {
-  position: relative;
-}
-
-.codeBlockWrapper:hover > .copyButton {
-  visibility: visible;
-  opacity: 1;
+  overflow: auto;
+  display: block;
+  padding: 0;
+  margin: 0;
 }
 
 .copyButton {
@@ -32,3 +29,17 @@
   transition: opacity 200ms ease-in-out, visibility 200ms ease-in-out,
     bottom 200ms ease-in-out;
 }
+
+.codeBlock:hover > .copyButton {
+  visibility: visible;
+  opacity: 1;
+}
+
+.codeBlockLines {
+  background-color: transparent;
+  border-radius: 0;
+  margin-bottom: 0;
+  float: left;
+  min-width: 100%;
+  padding: var(--ifm-pre-padding);
+}