fix: make page wrapper take full height

facebook · Mar 26, 2022 · 5870f0f · 5870f0f
1 parent 4957ec9
commit 5870f0f
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 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
@@ -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
@@ -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
@@ -77,7 +77,6 @@ export default function DocPage(props: Props): JSX.Element {
       />
       <HtmlClassNameProvider
         className={clsx(
-          ThemeClassNames.wrapper.docsPages,
           ThemeClassNames.page.docsDocPage,
           props.versionMetadata.className,
         )}>