Unable to reduce the Sidebar width for Docs page

[venkata-penumatsa]

🐛 Bug Report

Unable to reduce the sidebar width, I would like to reduce the sidebar width for my Docs page. After inspecting the page, I notice the standard width is 300px and this is coming from a variable --doc-sidebar-width: 300px;
So, I tried to override this CSS variable by placing the below code in the src/css/custom.css page

:root {
  --doc-sidebar-width: 200px;
}

:root {
  --ifm-color-primary: #25c2a0;
  --ifm-color-primary-dark: rgb(33, 175, 144);
  --ifm-color-primary-darker: rgb(31, 165, 136);
  --ifm-color-primary-darkest: rgb(26, 136, 112);
  --ifm-color-primary-light: rgb(70, 203, 174);
  --ifm-color-primary-lighter: rgb(102, 212, 189);
  --ifm-color-primary-lightest: rgb(146, 224, 208);
  --ifm-code-font-size: 95%;
}

But no luck!!! The interesting thing is from inspect mode --doc-sidebar-width: shown as 200 in line number 3083 but it's not effective. again at line number 3814 this is resetting to 300. So I conclude this as a bug as resetting infima variable via Global CSS file src/css/custom.css isn't taking any precedence and effective

please note below screen shots are my local machine using google chrome browser. However when I reproduce the same via CodeSandbox the line numbers are changing but same behavior

Have you read the Contributing Guidelines on issues?

yes

To Reproduce

1. Step 1... Create a new project by npx @docusaurus/init@latest init my-website classic
2. Step 2... cd my-website and yarn run start
3. Step 3... go into inspect mode of browser and inspect the sidebar from Docs page

Expected behavior

When I used the below code inside the CSS file, I expect this code should work and the Sidebar width gets adjusted to 200px instead of 300px

:root {
  --doc-sidebar-width: 200px;
}

Actual Behavior

When I used the below code inside the CSS file, I noticed this code isn't working and the Sidebar width isn't gets adjusted to 200px instead of 300px

:root {
  --doc-sidebar-width: 200px;
}

Your Environment

• Public source code: n/a
• Public site url: n/a
• Docusaurus version used: 2.0.0-alpha.72
• Environment name and version: Chrome Version 89.0.4389.90 (Official Build) (32-bit), Node.js 14.16.0
• Operating system and version (desktop or mobile): desktop Windows 10

Reproducible Demo

Code Sandbox link - https://yy8g9.sse.codesandbox.io/docs/

docusaurus.config.js

/** @type {import('@docusaurus/types').DocusaurusConfig} */
module.exports = {
  title: 'My Site',
  tagline: 'The tagline of my site',
  url: 'https://your-docusaurus-test-site.com',
  baseUrl: '/',
  onBrokenLinks: 'throw',
  onBrokenMarkdownLinks: 'warn',
  favicon: 'img/favicon.ico',
  organizationName: 'facebook', // Usually your GitHub org/user name.
  projectName: 'docusaurus', // Usually your repo name.
  themeConfig: {
    navbar: {
      title: 'My Site',
      logo: {
        alt: 'My Site Logo',
        src: 'img/logo.svg',
      },
      items: [
        {
          to: 'docs/',
          activeBasePath: 'docs',
          label: 'Docs',
          position: 'left',
        },
        {to: 'blog', label: 'Blog', position: 'left'},
        {
          href: 'https://github.com/facebook/docusaurus',
          label: 'GitHub',
          position: 'right',
        },
      ],
    },
    footer: {
      style: 'dark',
      links: [
        {
          title: 'Docs',
          items: [
            {
              label: 'Style Guide',
              to: 'docs/',
            },
            {
              label: 'Second Doc',
              to: 'docs/doc2/',
            },
          ],
        },
        {
          title: 'Community',
          items: [
            {
              label: 'Stack Overflow',
              href: 'https://stackoverflow.com/questions/tagged/docusaurus',
            },
            {
              label: 'Discord',
              href: 'https://discordapp.com/invite/docusaurus',
            },
            {
              label: 'Twitter',
              href: 'https://twitter.com/docusaurus',
            },
          ],
        },
        {
          title: 'More',
          items: [
            {
              label: 'Blog',
              to: 'blog',
            },
            {
              label: 'GitHub',
              href: 'https://github.com/facebook/docusaurus',
            },
          ],
        },
      ],
      copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`,
    },
  },
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        docs: {
          sidebarPath: require.resolve('./sidebars.js'),
          // Please change this to your repo.
          editUrl:
            'https://github.com/facebook/docusaurus/edit/master/website/',
        },
        blog: {
          showReadingTime: true,
          // Please change this to your repo.
          editUrl:
            'https://github.com/facebook/docusaurus/edit/master/website/blog/',
        },
        theme: {
          customCss: require.resolve('./src/css/custom.css'),
        },
      },
    ],
  ],
};

custom.css

/* stylelint-disable docusaurus/copyright-header */
/**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
 */

/* You can override the default Infima variables here. */

:root {
  --doc-sidebar-width: 200px;
}

:root {
  --ifm-color-primary: #25c2a0;
  --ifm-color-primary-dark: rgb(33, 175, 144);
  --ifm-color-primary-darker: rgb(31, 165, 136);
  --ifm-color-primary-darkest: rgb(26, 136, 112);
  --ifm-color-primary-light: rgb(70, 203, 174);
  --ifm-color-primary-lighter: rgb(102, 212, 189);
  --ifm-color-primary-lightest: rgb(146, 224, 208);
  --ifm-code-font-size: 95%;
}

.docusaurus-highlight-code-line {
  background-color: rgb(72, 77, 91);
  display: block;
  margin: 0 calc(-1 * var(--ifm-pre-padding));
  padding: 0 var(--ifm-pre-padding);
}

[slorber]

You are right, this is something annoying as the custom CSS is not inserted last it may not have the final word.

This is a concrete example of this more general issue: #3678