Storybook (on Vite) differences in development env and build

I'm working in storybook on Vite, and running in a problem where the sidebar in the build looks way different from the one I'm seeing when I start the storybook server locally.

• This is with the SB server running: Screenshot
• And this is when I run the build (and how it looks after CI/CD): screenshot

We don't need to see every story individualy, so we want it to be like how it is in the local environment.

main.js:

const { resolve } = require('path');

module.exports = {
  stories: ['../src/**/!(Template).stories.@(tsx|mdx)'],

  addons: [
    '@storybook/addon-actions',
    '@storybook/addon-docs',
    '@storybook/addon-controls',
    '@storybook/addon-links',
    'storybook-addon-react-docgen',
  ],

  core: {
    builder: 'storybook-builder-vite',
  },

  // customize the Vite config here
  async viteFinal(config, { configType }) {
    return {
      ...config,
      base: './',
      resolve: {
        alias: {
          index: resolve(__dirname, '../', 'src', 'index'),
          Utils: resolve(__dirname, '../', 'src', 'Utils'),
          Context: resolve(__dirname, '../', 'src', 'Context'),
          Components: resolve(__dirname, '../', 'src', 'Components'),
          Tokens: resolve(__dirname, '../', 'src', 'Tokens'),
          Hooks: resolve(__dirname, '../', 'src', 'Hooks'),
        },
      },
      define: configType === 'DEVELOPMENT' && {
        'process.env': {},
        global: {},
      },
      plugins: config.plugins.filter((plugin) =>
        configType === 'DEVELOPMENT'
          ? plugin.name !== 'react-refresh'
          : plugin.name !== 'mock-core-js'
      ),
    };
  },
};

manager.js:

import { addons } from '@storybook/addons';
import theme from './theme';

addons.setConfig({
  theme: theme,
  isFullscreen: false,
  showNav: true,
  showPanel: false,
  panelPosition: 'bottom',
  enableShortcuts: false,
  isToolshown: false,
  selectedPanel: 'Overview', // Id to select an addon panel
  initialActive: 'sidebar', // Select the default active tab on Mobile

  // Sidebar options, see below
  sidebar: {
    showRoots: true,
    collapsedRoots: ['utils', 'experimental'],
  },

  // Modify the tools in the toolbar using the addon id
  toolbar: {
    title: { hidden: true },
    zoom: { hidden: true },
    eject: { hidden: true },
    copy: { hidden: true },
    fullscreen: { hidden: true },
  },
});

Preview.js:

import 'react-toastify/dist/ReactToastify.min.css';
import 'rc-collapse/assets/index.css';
import '../styles/cogs.less';

export const parameters = {
  viewMode: 'docs',
  backgrounds: {
    default: 'white',
    values: [
      { name: 'white', value: '#fff' },
      { name: 'black', value: '#000' },
    ],
  },
  controls: { expanded: false },
  options: {
    storySort: {
      order: [
        'Overview',
        'About Cogs.js',
        'Getting started',
        'How to contribute',
        'Design',

        'Tokens',
        'Components',
        'Patterns',
        'Layout',
        'Utils',
        '*',
      ],
    },
  },
};

Many thanks!