From f253a4da6fa5eb709780d99c03d8035afd3fc195 Mon Sep 17 00:00:00 2001
From: Jimmy Comack <jimmy@yoast.com>
Date: Thu, 23 Apr 2020 10:00:15 +0200
Subject: [PATCH] Fixed issues with the mobile layout and the logo and schema
 examples

---
 src/components/YoastSchemaExample.js          | 37 -----------------
 src/components/YoastSchemaExample/index.js    | 40 +++++++++++++++++++
 .../YoastSchemaExample/styles.module.css      | 13 ++++++
 src/theme/DocPage/styles.module.css           |  1 +
 4 files changed, 54 insertions(+), 37 deletions(-)
 delete mode 100644 src/components/YoastSchemaExample.js
 create mode 100644 src/components/YoastSchemaExample/index.js
 create mode 100644 src/components/YoastSchemaExample/styles.module.css

diff --git a/src/components/YoastSchemaExample.js b/src/components/YoastSchemaExample.js
deleted file mode 100644
index 91180ba9..00000000
--- a/src/components/YoastSchemaExample.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from 'react';
-import CodeBlock from '@theme/CodeBlock';
-
-/**
- * Outputs a properly formed JSON-LD tag to be used in the output.
- *
- * @param string jsonScript
- *
- * @returns {string} The HTML output.
- */
-const toHTMLOutput = (jsonScript) => {
-	return `<script type="application/ld+json">${jsonScript}</script>`;
-};
-
-/**
- * The Yoast Schema Example component.
- *
- * @param {Object} props The props.
- *
- * @returns {JSX} The schema example component.
- * @constructor
- */
-const YoastSchemaExample = (props) => {
-	const cleaned = toHTMLOutput(props.children);
-
-	return (
-		<div className="schema_example">
-			<form action="https://search.google.com/structured-data/testing-tool" method="post" target="_blank">
-				<input className="button button--secondary" type="submit" value="Test &amp; modify in the Google Structured Data Testing Tool" />
-				<textarea name="code" style={{ display: "none" }} value={cleaned} readOnly></textarea>
-			</form>
-			<CodeBlock className="json">{props.children}</CodeBlock>
-		</div>
-	);
-}
-
-export default YoastSchemaExample;
diff --git a/src/components/YoastSchemaExample/index.js b/src/components/YoastSchemaExample/index.js
new file mode 100644
index 00000000..d93aef60
--- /dev/null
+++ b/src/components/YoastSchemaExample/index.js
@@ -0,0 +1,40 @@
+import React from "react";
+import CodeBlock from "@theme/CodeBlock";
+import styles from "./styles.module.css";
+import classnames from "classnames";
+
+/**
+ * Outputs a properly formed JSON-LD tag to be used in the output.
+ *
+ * @param string jsonScript
+ *
+ * @returns {string} The HTML output.
+ */
+const toHTMLOutput = ( jsonScript ) => {
+	return `<script type="application/ld+json">${ jsonScript }</script>`;
+};
+
+/**
+ * The Yoast Schema Example component.
+ *
+ * @param {Object} props The props.
+ *
+ * @returns {JSX} The schema example component.
+ * @constructor
+ */
+const YoastSchemaExample = ( props ) => {
+	const cleaned = toHTMLOutput( props.children );
+
+	return (
+		<div className={ styles.schemaExample }>
+			<form action="https://search.google.com/structured-data/testing-tool" method="post" target="_blank">
+				<input className={ classnames( "button", "button--secondary", styles.modifyButton ) } type="submit"
+				       value="Test &amp; modify in the Google Structured Data Testing Tool"/>
+				<textarea name="code" className={ styles.codeArea } value={ cleaned } readOnly></textarea>
+			</form>
+			<CodeBlock className="json">{ props.children }</CodeBlock>
+		</div>
+	);
+}
+
+export default YoastSchemaExample;
diff --git a/src/components/YoastSchemaExample/styles.module.css b/src/components/YoastSchemaExample/styles.module.css
new file mode 100644
index 00000000..206903af
--- /dev/null
+++ b/src/components/YoastSchemaExample/styles.module.css
@@ -0,0 +1,13 @@
+.schemaExample {
+    overflow: hidden;
+}
+
+.codeArea {
+    display: none;
+}
+
+.modifyButton {
+    white-space: normal;
+    border-radius: var(--ifm-button-border-radius) var(--ifm-button-border-radius) 0 0;
+}
+
diff --git a/src/theme/DocPage/styles.module.css b/src/theme/DocPage/styles.module.css
index 8f84f195..7f470521 100755
--- a/src/theme/DocPage/styles.module.css
+++ b/src/theme/DocPage/styles.module.css
@@ -19,6 +19,7 @@
   max-height: 100vh;
   top: 0;
   overflow-y: auto;
+  z-index: 999;
 }
 
 .docMainContainer {