fix(core): scope wildcard CSS in error display to prevent global style leak

[mango766]

Closes #33735, closes #33947, closes #34036

What I did

Fixed a CSS nesting bug in base-preview-head.html where the * selector inside .sb-errordisplay_main was missing the & nesting combinator. Without &, some CSS processors (particularly in Vite/Rolldown production builds) emit the rule as a global * { background: #fff; color: #000 }, which overrides component background/text styles in the preview iframe.

The fix is a one-character change: * → & *, matching the pattern already used by .sb-nopreview_main a few lines above.

Before:

.sb-errordisplay_main {
    * {
      background: white;
      color: black;
    }
}

After:

.sb-errordisplay_main {
    & * {
      background: white;
      color: black;
    }
}

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

• stories
• unit tests
• integration tests
• end-to-end tests

Manual testing

1. Run a sandbox for template with Vite, e.g. yarn task --task sandbox --start-from auto --template react-vite/default-ts
2. Run npx storybook build (production build)
3. Serve the built storybook and open it in a browser
4. Inspect the preview iframe <style> content — verify there is no global * { background: #fff; color: #000 } rule
5. Verify that component stories render with their correct background/text colors

Alternatively, you can test with the web-components-vite template to reproduce the exact setup from #34036.

Documentation

• Add or update documentation reflecting your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Summary by CodeRabbit

• Bug Fixes
  • Improved error display styling by restricting style rules to error containers only. Previously, styling could unintentionally affect other interface elements throughout the application. This fix ensures error displays are properly isolated within their containers, preventing visual conflicts and providing a more consistent and reliable user experience.

[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: d268fbea-9f4b-4ed7-9ffb-c93370e7a7c8

📥 Commits

Reviewing files that changed from the base of the PR and between a571619 and 36507b3.

📒 Files selected for processing (1)

• code/core/assets/server/base-preview-head.html

---

📝 Walkthrough

Walkthrough

This PR refines CSS scoping in the error display component by changing the universal selector from a global rule to a scoped selector, ensuring style resets apply only within the .sb-errordisplay_main container.

Changes

Cohort / File(s)	Summary
Error Display Styling code/core/assets/server/base-preview-head.html	Scoped universal selector from global to .sb-errordisplay_main block by changing "*" to "& *", limiting color/background resets to the error display container subtree.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Possibly related PRs

• UI: Ensure preview error displays use a readable text color #33580: Modifies the same .sb-errordisplay_main CSS styling for error display scoping, addressing the same component scope.

📝 Coding Plan

• Generate coding plan for human review comments

---

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

Tip

CodeRabbit can use your project's `biome` configuration to improve the quality of JS/TS/CSS/JSON code reviews.

Add a configuration file to your project to customize how CodeRabbit runs biome.

[valentinpalkovic]

Closing, since a PR already exists which attempts to solve all three mentioned GitHub issues:
#34071