From 2913bd0fdfa5be185dd5dd0a5a1440bf28501054 Mon Sep 17 00:00:00 2001
From: Alexey Pyltsyn <lex61rus@gmail.com>
Date: Thu, 10 Jun 2021 16:22:34 +0300
Subject: [PATCH] fix(v2): tidy up Markdown page layout (#4917)

---
 .../src/theme/MDXPage/index.tsx               | 31 +++++++++----------
 .../src/theme/MDXPage/styles.module.css       | 10 ++++++
 2 files changed, 24 insertions(+), 17 deletions(-)
 create mode 100644 packages/docusaurus-theme-classic/src/theme/MDXPage/styles.module.css

diff --git a/packages/docusaurus-theme-classic/src/theme/MDXPage/index.tsx b/packages/docusaurus-theme-classic/src/theme/MDXPage/index.tsx
index 1b523d9658..aff5e7b6d5 100644
--- a/packages/docusaurus-theme-classic/src/theme/MDXPage/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/MDXPage/index.tsx
@@ -6,6 +6,7 @@
  */
 
 import React from 'react';
+import clsx from 'clsx';
 import Layout from '@theme/Layout';
 import {MDXProvider} from '@mdx-js/react';
 import MDXComponents from '@theme/MDXComponents';
@@ -13,6 +14,8 @@ import type {Props} from '@theme/MDXPage';
 import TOC from '@theme/TOC';
 import {ThemeClassNames} from '@docusaurus/theme-common';
 
+import styles from './styles.module.css';
+
 function MDXPage(props: Props): JSX.Element {
   const {content: MDXPageContent} = props;
   const {frontMatter, metadata} = MDXPageContent;
@@ -32,24 +35,18 @@ function MDXPage(props: Props): JSX.Element {
       permalink={permalink}
       wrapperClassName={wrapperClassName ?? ThemeClassNames.wrapper.mdxPages}
       pageClassName={ThemeClassNames.page.mdxPage}>
-      <main>
-        <div className="container container--fluid">
-          <div className="margin-vert--lg padding-vert--lg">
-            <div className="row">
-              <div className="col col--8 col--offset-2">
-                <div className="container">
-                  <MDXProvider components={MDXComponents}>
-                    <MDXPageContent />
-                  </MDXProvider>
-                </div>
-              </div>
-              {!hideTableOfContents && MDXPageContent.toc && (
-                <div className="col col--2">
-                  <TOC toc={MDXPageContent.toc} />
-                </div>
-              )}
-            </div>
+      <main className="container container--fluid margin-vert--lg">
+        <div className={clsx('row', styles.MdxPageWrapper)}>
+          <div className={clsx('col', !hideTableOfContents && 'col--8')}>
+            <MDXProvider components={MDXComponents}>
+              <MDXPageContent />
+            </MDXProvider>
           </div>
+          {!hideTableOfContents && MDXPageContent.toc && (
+            <div className="col col--2">
+              <TOC toc={MDXPageContent.toc} />
+            </div>
+          )}
         </div>
       </main>
     </Layout>
diff --git a/packages/docusaurus-theme-classic/src/theme/MDXPage/styles.module.css b/packages/docusaurus-theme-classic/src/theme/MDXPage/styles.module.css
new file mode 100644
index 0000000000..6920c4a5ab
--- /dev/null
+++ b/packages/docusaurus-theme-classic/src/theme/MDXPage/styles.module.css
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.MdxPageWrapper {
+  justify-content: center;
+}