Docs - main.docMainContainer has bad max-width when there is no sidebar

[TomPeirs]

Have you read the Contributing Guidelines on issues?

• [X] I have read the Contributing Guidelines on issues.

Prerequisites

• [X] I'm using the latest version of Docusaurus.
• [X] I have tried the npm run clear or yarn clear command.
• [X] I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• [X] I have tried creating a repro with https://new.docusaurus.io.
• [X] I have read the console error message carefully (if applicable).

Description

Why is the docmaincontainers' width not 100% When the doc has no sidebar? We substract '30px' which leads to the fact we are not using the full width. This logic only makes sense if you have hideable sidebar enabled (configured) in the first place, and secondly IF the page contains a sidebar. https://docusaurus.io/docs/sidebar#hideable-sidebar

Reproducible demo

No response

Steps to reproduce

Visit: https://docs.boc-group.com/adonis/en/docs/15.0/news/ Inspect docMainContainer, you will notice that calc(100% - var(--doc-sidebar-hidden-width)) where doc-sidebar-hidden-width is 30px, but it should be 0 in case there is no sidebar. Additionally it should globally be 0 if this was not configured in docusaurus.config.js because by default it is set to false.

Expected behavior

I expect that the global variable --doc-sidebar-hidden-width = 0px IF hideable sidebar is not configured on docusaurs.config AND if the page contains no sidebar. Otherwise it can be 30px

Actual behavior

I expect that the global variable --doc-sidebar-hidden-width = 0px IF hideable sidebar is not configured on docusaurs.config AND if the page contains no sidebar. Otherwise it can be 30px

Your environment

• Public source code:
• Public site URL: https://docs.boc-group.com/adonis/en/docs/15.0/news/
• Docusaurus version used: latest
• Environment name and version (e.g. Chrome 89, Node.js 16.4):
• Operating system and version (e.g. Ubuntu 20.04.2 LTS):

Self-service

• [ ] I'd be willing to fix this bug myself.

[slorber]

Yes, it makes sense to me to not have this extra -30px 👍

Not so satisfied with all our layouts in general, probably need to refactor all this a bit in general. The TOC should also probably take more space when possible instead of wrapping TOC items on multiple lines.

[TomPeirs]

@slorber , agree. Yesterday I swizzled the MDXPage component since the layout is also different as the docpage. The TOC on MDXPage takes col-2 by default there, whereas on the docpage it takes col-3. I couldn't figure out why this difference, so changed it to be consistent as I received some feedback on that.

[slorber]

Some of those layout issues are quite historical, and changing these can mess-up with existing customized sites so I'm always a bit frightened to do these changes.

We'll probably need to redesign all the layouts at once to make them consistent across all plugins, and ship that as a single major version breaking change.

This issue is minor (only affecting an edge case: docs pages without sidebars) so we can handle this now as a bugfix.

[TomPeirs]

@slorber I think this might solve the issue. in DocPage/Layout/Main/index.tsx

 const { hideable } = useThemeConfig().docs.sidebar;
  return (
    <main
      className={clsx(
        styles.docMainContainer,
        { [styles.docMainContainerEnhanced]: (hideable && hiddenSidebarContainer) || !sidebar }
      )}>

and import { useThemeConfig } from '@docusaurus/theme-common'; I think that the hook useDocsSidebar might be causing some trouble and why this is not working currently. Or at least I am missing something.

[AshwanthramKL]

@slorber I think this might solve the issue. in DocPage/Layout/Main/index.tsx

 const { hideable } = useThemeConfig().docs.sidebar;
  return (
    <main
      className={clsx(
        styles.docMainContainer,
        { [styles.docMainContainerEnhanced]: (hideable && hiddenSidebarContainer) || !sidebar }
      )}>

and import { useThemeConfig } from '@docusaurus/theme-common'; I think that the hook useDocsSidebar might be causing some trouble and why this is not working currently. Or at least I am missing something.

Hey @Josh-Cena, can I try implementing this?

[slorber]

@AshwanthramKL for small issues that nobody works on, you can try to submit a PR directly, no need to claim the issue

[Airkro]

This is what i do:

diff --git a/lib/theme/DocRoot/Layout/Main/index.js b/lib/theme/DocRoot/Layout/Main/index.js
index aa1b75d0bbe3eb0f18790a42748fc69a9eb9b2a2..1c90610909642fddf9c996342b3bb540dce6bc96 100644
--- a/lib/theme/DocRoot/Layout/Main/index.js
+++ b/lib/theme/DocRoot/Layout/Main/index.js
@@ -14,13 +14,14 @@ export default function DocRootLayoutMain({hiddenSidebarContainer, children}) {
     <main
       className={clsx(
         styles.docMainContainer,
-        (hiddenSidebarContainer || !sidebar) && styles.docMainContainerEnhanced,
+        sidebar ? styles.docMainContainerWithSidebar: undefined,
+        sidebar && hiddenSidebarContainer && styles.docMainContainerEnhanced,
       )}>
       <div
         className={clsx(
           'container padding-top--md padding-bottom--lg',
           styles.docItemWrapper,
-          hiddenSidebarContainer && styles.docItemWrapperEnhanced,
+          sidebar && hiddenSidebarContainer && styles.docItemWrapperEnhanced,
         )}>
         {children}
       </div>
diff --git a/lib/theme/DocRoot/Layout/Main/styles.module.css b/lib/theme/DocRoot/Layout/Main/styles.module.css
index 0754fce24b02e3e33e4b675dde2dc85ac2e03fbd..989abc636af765998a5f14a40a3770ccba5526f9 100644
--- a/lib/theme/DocRoot/Layout/Main/styles.module.css
+++ b/lib/theme/DocRoot/Layout/Main/styles.module.css
@@ -11,7 +11,7 @@
 }
 
 @media (min-width: 997px) {
-  .docMainContainer {
+  .docMainContainerWithSidebar {
     flex-grow: 1;
     max-width: calc(100% - var(--doc-sidebar-width));
   }

Generate by pnpm patch. maybe not the best way.