Fixed issues with the mobile layout and the logo and schema examples

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;

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;
+}
+

src/theme/DocPage/styles.module.css

@@ -19,6 +19,7 @@
   max-height: 100vh;
   top: 0;
   overflow-y: auto;
+  z-index: 999;
 }
 
 .docMainContainer {