Show Code under Docs Broken Styling

[yaldram]

Describe the bug
Hello Community, I am facing a weird issue the show code under docs has broken styles for me. When expanded the text is blurry and the colors are light not visible, hard to read.

To Reproduce
Image : -

System
Environment Info:

System:
OS: Windows 10 10.0.19041
CPU: (8) x64 Intel(R) Core(TM) i5-8265U CPU @ 1.60GHz
Binaries:
Node: 14.5.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.5 - ~\AppData\Roaming\npm\yarn.CMD
npm: 6.14.5 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: Spartan (44.19041.964.0), Chromium (91.0.864.71)
npmPackages:
@storybook/addon-a11y: ^6.3.2 => 6.3.3
@storybook/addon-actions: ^6.3.2 => 6.3.3
@storybook/addon-essentials: ^6.3.2 => 6.3.3
@storybook/addon-knobs: ^6.3.0 => 6.3.0
@storybook/addon-links: ^6.3.2 => 6.3.3
@storybook/addon-viewport: ^6.3.2 => 6.3.3
@storybook/react: ^6.3.2 => 6.3.3

[maxhtz96]

Same issue. It seems like extra css is added for some reason:

main.js config:

const path = require('path');
const pathAliases = require('mystuff/pathaliases/pathAliases').default;

module.exports = {
  stories: ['../src/**/**/*.stories.@(tsx|mdx)'],
  addons: [
    '@storybook/addon-knobs/register',
    '@storybook/addon-actions',
    '@storybook/addon-jest',
    {
      name: '@storybook/addon-docs',
      options: {
        configureJSX: true,
        babelOptions: {},
        sourceLoaderOptions: null,
      },
    },
    'storybook-readme/register',
  ],
  typescript: {
    check: false,
    checkOptions: {},
    reactDocgen: 'react-docgen-typescript',
    reactDocgenTypescriptOptions: {
      shouldExtractLiteralValuesFromEnum: true,
      propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
    },
  },
  webpackFinal: async (config) => {
    config.module.rules.push({
      test: /\.(stories|story)\.[tj]sx?$/,
      loaders: {
        loader: require.resolve('@storybook/source-loader'),
        options: { parser: 'typescript' },
      },
      exclude: [/node_modules/],
    });

    config.module.rules.push({
      test: '/.md$/',
      loaders: ['html-loader', 'markdown-loader'],
    });

    config.resolve.extensions.push('.ts', '.tsx');
    config.resolve.alias = { ...config.resolve.alias, ...pathAliases() };

    return config;
  },
};

npmPackages:
"@storybook/addon-actions": "6.1.18",
"@storybook/addon-docs": "6.1.18",
"@storybook/addon-jest": "6.1.18",
"@storybook/addon-knobs": "6.1.18",
"@storybook/addon-options": "5.3.21",
"@storybook/addon-storyshots": "6.1.18",
"@storybook/addon-storyshots-puppeteer": "6.1.18",
"@storybook/addon-viewport": "6.1.18",
"@storybook/addons": "6.1.18",
"@storybook/react": "6.1.18",
"@storybook/theming": "6.1.18",
"storybook-react-router": "1.0.8",
"storybook-readme": "5.0.9",

[alk-mandrianarijaona]

I believe this is related to #15598 as well

[shilman]

We’re cleaning house! Storybook has changed a lot since this issue was created and we don’t know if it’s still valid.

Please open a new issue referencing this one if:

• this is still a problem in SB 7.x
• you can provide a consistent reproduction in 7.x (at https://storybook.new/ or per repro docs).