Viewport: Highlight toolbar button when custom viewport is active

[derinbarutcu17]

Summary

Closes #35067

When a custom viewport is active (user has manually entered width/height rather than selecting a preset), the viewport toolbar button does not highlight/activate, even though a non-default viewport is in use.

Root Cause

The Select component uses defaultOptions to find a matching entry in its options array. If a match is found, selectedOptions.length > 0 and StyledButton renders with $hasSelection={true} (the highlighted active state).

When a custom viewport is set, value is a URL-pattern string (e.g. 440-355) that is never present as a key in viewportMap. So setSelectedFromDefault returns [] → $hasSelection={false} → the button appears inactive.

Fix

In ViewportTool, when isCustom && value is true, append a synthetic option entry that uses the current value as its key. This gives defaultOptions={value} a match in the options list, making selectedOptions non-empty and $hasSelection correct.

The synthetic option is hidden from the visible dropdown list. Its sole purpose is to correctly reflect the active state in the toolbar button.

Before / After

Before: Toolbar viewport button stays unhighlighted when a custom viewport size is set.

After: Toolbar viewport button highlights correctly when any non-default viewport is active — whether a preset or a custom size.

Manual testing

1. Open any Storybook story in the story view mode.
2. Open the Viewport toolbar dropdown and select any preset (e.g. "iPhone 14").
3. Confirm the toolbar button is highlighted/active (blue tint background).
4. Now open the Viewport panel and manually enter a custom width and height (e.g. 440×355).
5. Before this fix: the toolbar button goes back to unhighlighted even though a non-default viewport is set.
6. After this fix: the toolbar button remains highlighted when a custom viewport is active.
7. Clicking "Reset viewport" should return the button to its inactive (default) state.

Summary by CodeRabbit

• Bug Fixes
  • Fixed viewport toolbar button state to properly indicate when a custom viewport is selected.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 35b2c129-2a0b-4ec0-bc23-3ca211b66685

📥 Commits

Reviewing files that changed from the base of the PR and between 4970cdf and f3965b5.

📒 Files selected for processing (1)

• code/core/src/viewport/components/Tool.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

• code/core/src/viewport/components/Tool.tsx

---

📝 Walkthrough

Walkthrough

ViewportTool's viewport option rendering was refactored to correctly display the active state when a custom viewport is selected. The options computation now conditionally appends a synthetic option matching the current custom viewport, enabling the Select component to render an active toolbar button.

Changes

Custom Viewport Selection

Layer / File(s)	Summary
Custom viewport option rendering in ViewportTool code/core/src/viewport/components/Tool.tsx	The useMemo building Select options now builds presetOptions from viewportMap entries, then appends a synthetic option when a custom viewport is active (isCustom && value) using iconsMap['other'] and right: null. The dependency list expanded to include viewportMap, isCustom, value, and name.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• storybookjs/storybook#33560: Changes Select's reset handling to work reliably with viewport tool's custom value behavior.

---

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.}

[derinbarutcu17]

The PR description has been updated:

• Title was already in "Area: Summary" format
• Changed "#### Manual testing" to "### Manual testing" (h4 → h3) to match the required format

Labels cannot be added without admin access. Could a maintainer please add the appropriate labels (bug, ci:normal)?

[Sidnioulz]

Thanks for handling this @derinbarutcu17!

[storybook-app-bot]

Package Benchmarks

^{Commit: f3965b5, ran on 8 June 2026 at 16:43:12 UTC}

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

@storybook/ember

	Before	After	Difference
Dependency count	189	188	🎉 -1 🎉
Self size	15 KB	15 KB	🚨 +18 B 🚨
Dependency size	30.77 MB	30.67 MB	🎉 -101 KB 🎉
Bundle Size Analyzer	Link	Link