From 5870f0f3beb4af64fa085066e5d3477476440f7c Mon Sep 17 00:00:00 2001
From: Alexey Pyltsyn <lex61rus@gmail.com>
Date: Sun, 27 Mar 2022 00:58:59 +0300
Subject: [PATCH 1/2] fix: make page wrapper take full height

---
 .../src/theme/DocPage/Layout/index.tsx                   | 4 ++--
 .../src/theme/DocPage/Layout/styles.module.css           | 9 ++++++++-
 .../docusaurus-theme-classic/src/theme/DocPage/index.tsx | 1 -
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/index.tsx
index 77d148811826..5bfca0b4f2a1 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/index.tsx
@@ -14,13 +14,13 @@ import DocPageLayoutMain from '@theme/DocPage/Layout/Main';
 
 import styles from './styles.module.css';
 
-import {useDocsSidebar} from '@docusaurus/theme-common';
+import {useDocsSidebar, ThemeClassNames} from '@docusaurus/theme-common';
 
 export default function DocPageLayout({children}: Props): JSX.Element {
   const sidebar = useDocsSidebar();
   const [hiddenSidebarContainer, setHiddenSidebarContainer] = useState(false);
   return (
-    <Layout>
+    <Layout wrapperClassName={ThemeClassNames.wrapper.docsPages}>
       <BackToTopButton />
       <div className={styles.docPage}>
         {sidebar && (
diff --git a/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/styles.module.css b/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/styles.module.css
index 8b3e52ce13e5..a34f0837facb 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/styles.module.css
@@ -10,10 +10,17 @@
   --doc-sidebar-hidden-width: 30px;
 }
 
+:global(.docs-wrapper) {
+  display: flex;
+}
+
+.docPage {
+  width: 100%;
+}
+
 .docPage,
 .docMainContainer {
   display: flex;
-  width: 100%;
 }
 
 .docSidebarContainer {
diff --git a/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx
index 8ee721f9862b..32cfa1ff7704 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx
@@ -77,7 +77,6 @@ export default function DocPage(props: Props): JSX.Element {
       />
       <HtmlClassNameProvider
         className={clsx(
-          ThemeClassNames.wrapper.docsPages,
           ThemeClassNames.page.docsDocPage,
           props.versionMetadata.className,
         )}>

From 1bc588416dafe6606bc3e3456c8b2fe567a1d13c Mon Sep 17 00:00:00 2001
From: Alexey Pyltsyn <lex61rus@gmail.com>
Date: Sun, 27 Mar 2022 11:08:22 +0300
Subject: [PATCH 2/2] Better solution

---
 .../src/theme/DocPage/Layout/index.tsx                       | 4 ++--
 .../src/theme/DocPage/Layout/styles.module.css               | 5 +----
 .../docusaurus-theme-classic/src/theme/DocPage/index.tsx     | 2 ++
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/index.tsx
index 5bfca0b4f2a1..858a24e39183 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/index.tsx
@@ -14,13 +14,13 @@ import DocPageLayoutMain from '@theme/DocPage/Layout/Main';
 
 import styles from './styles.module.css';
 
-import {useDocsSidebar, ThemeClassNames} from '@docusaurus/theme-common';
+import {useDocsSidebar} from '@docusaurus/theme-common';
 
 export default function DocPageLayout({children}: Props): JSX.Element {
   const sidebar = useDocsSidebar();
   const [hiddenSidebarContainer, setHiddenSidebarContainer] = useState(false);
   return (
-    <Layout wrapperClassName={ThemeClassNames.wrapper.docsPages}>
+    <Layout wrapperClassName={styles.docsWrapper}>
       <BackToTopButton />
       <div className={styles.docPage}>
         {sidebar && (
diff --git a/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/styles.module.css b/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/styles.module.css
index a34f0837facb..bd1e23dfd80f 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/styles.module.css
@@ -10,14 +10,11 @@
   --doc-sidebar-hidden-width: 30px;
 }
 
-:global(.docs-wrapper) {
-  display: flex;
-}
-
 .docPage {
   width: 100%;
 }
 
+.docsWrapper,
 .docPage,
 .docMainContainer {
   display: flex;
diff --git a/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx
index 32cfa1ff7704..2c908cc05535 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx
@@ -77,6 +77,8 @@ export default function DocPage(props: Props): JSX.Element {
       />
       <HtmlClassNameProvider
         className={clsx(
+          // TODO: it should be removed from here
+          ThemeClassNames.wrapper.docsPages,
           ThemeClassNames.page.docsDocPage,
           props.versionMetadata.className,
         )}>