Toolbar: Remove extra toolbar divider when zoom controls not shown

[jonathan-fulton]

Description

Fixes #21429

In docs mode, an extra divider/separator was appearing in the toolbar even though no tools followed it.

Problem

The menuTool component renders a <Separator /> after the menu button. This separator is intended to visually separate the menu button from subsequent tools (like remountTool).

However, in docs mode:

• remountTool has match: ({ viewMode }) => viewMode === 'story'
• So it gets filtered out in docs mode
• But the menuTool still renders its separator
• Result: orphaned separator with nothing to separate

Solution

Made the <Separator /> conditional on viewMode === 'story', since that's when the other left-side tools are actually visible.

Before/After

Before (docs mode):

[Menu Button] | (empty space - other tools filtered out)
              ^
              orphaned separator

After (docs mode):

[Menu Button] (clean, no orphaned separator)

Story mode (unchanged):

[Menu Button] | [Remount Button] ...
              ^
              separator still appears correctly

Summary by CodeRabbit

• Bug Fixes
  • Fixed conditional rendering of menu separators to display correctly based on the current view mode.

[coderabbitai]

📝 Walkthrough

Walkthrough

Added viewMode state to the menu component's data mapping and implemented conditional rendering of a Separator element based on the current view mode, ensuring the separator only displays when viewMode equals 'story'.

Changes

Cohort / File(s)	Summary
Menu Conditional Rendering code/core/src/manager/components/preview/tools/menu.tsx	Added viewMode to menuMapper and render consumer. Implemented conditional Separator rendering that only displays when viewMode is 'story', replacing unconditional rendering.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

✨ Finishing touches

• 📝 Generate docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[storybook-app-bot]

Package Benchmarks

^{Commit: e904086, ran on 11 March 2026 at 09:29:05 UTC}

The following packages have significant changes to their size or dependencies:

@storybook/addon-docs

	Before	After	Difference
Dependency count	18	18	0
Self size	1.66 MB	1.64 MB	🎉 -18 KB 🎉
Dependency size	9.25 MB	9.25 MB	🎉 -565 B 🎉
Bundle Size Analyzer	Link	Link

@storybook/addon-vitest

	Before	After	Difference
Dependency count	2	2	0
Self size	403 KB	382 KB	🎉 -21 KB 🎉
Dependency size	338 KB	338 KB	🎉 -3 B 🎉
Bundle Size Analyzer	Link	Link

storybook

	Before	After	Difference
Dependency count	49	49	0
Self size	20.21 MB	20.40 MB	🚨 +190 KB 🚨
Dependency size	16.52 MB	16.52 MB	🎉 -2 B 🎉
Bundle Size Analyzer	Link	Link

@storybook/nextjs

	Before	After	Difference
Dependency count	534	534	0
Self size	650 KB	646 KB	🎉 -4 KB 🎉
Dependency size	59.89 MB	59.93 MB	🚨 +34 KB 🚨
Bundle Size Analyzer	Link	Link

@storybook/nextjs-vite

	Before	After	Difference
Dependency count	92	92	0
Self size	1.12 MB	1.12 MB	🎉 -1 KB 🎉
Dependency size	22.45 MB	22.49 MB	🚨 +32 KB 🚨
Bundle Size Analyzer	Link	Link

@storybook/react-native-web-vite

	Before	After	Difference
Dependency count	124	124	0
Self size	30 KB	30 KB	🎉 -154 B 🎉
Dependency size	23.74 MB	23.77 MB	🚨 +32 KB 🚨
Bundle Size Analyzer	Link	Link

@storybook/react-vite

	Before	After	Difference
Dependency count	82	82	0
Self size	35 KB	35 KB	🎉 -98 B 🎉
Dependency size	20.24 MB	20.27 MB	🚨 +32 KB 🚨
Bundle Size Analyzer	Link	Link

@storybook/react-webpack5

	Before	After	Difference
Dependency count	271	271	0
Self size	24 KB	24 KB	🎉 -74 B 🎉
Dependency size	44.52 MB	44.55 MB	🚨 +34 KB 🚨
Bundle Size Analyzer	Link	Link

@storybook/cli

	Before	After	Difference
Dependency count	183	183	0
Self size	779 KB	776 KB	🎉 -3 KB 🎉
Dependency size	67.35 MB	67.50 MB	🚨 +147 KB 🚨
Bundle Size Analyzer	Link	Link

@storybook/codemod

	Before	After	Difference
Dependency count	176	176	0
Self size	32 KB	32 KB	🎉 -70 B 🎉
Dependency size	65.88 MB	66.07 MB	🚨 +190 KB 🚨
Bundle Size Analyzer	Link	Link

create-storybook

	Before	After	Difference
Dependency count	50	50	0
Self size	1.04 MB	1000 KB	🎉 -43 KB 🎉
Dependency size	36.74 MB	36.93 MB	🚨 +190 KB 🚨
Bundle Size Analyzer	node	node

@storybook/preact

	Before	After	Difference
Dependency count	2	2	0
Self size	23 KB	16 KB	🎉 -7 KB 🎉
Dependency size	32 KB	32 KB	🎉 -3 B 🎉
Bundle Size Analyzer	Link	Link

@storybook/react

	Before	After	Difference
Dependency count	58	57	🎉 -1 🎉
Self size	1.19 MB	1.23 MB	🚨 +36 KB 🚨
Dependency size	13.19 MB	12.93 MB	🎉 -264 KB 🎉
Bundle Size Analyzer	Link	Link