[Question/Enhancement] Portal Setup #609
Description
I wanted to check if we have this configured in COSS UI or if it's something we should add.
According to the Base UI Quick Start documentation, Base UI requires a specific portal setup to ensure components that render popups (Dialog, Popover, Select, Menu, Tooltip, etc.) appear correctly on top of all page content.
The documentation states that the following CSS should be added to the application layout root:
css.root {
isolation: isolate;
}Applied to the layout structure:
<body>
<div className="root">
{children}
</div>
</body>This creates a separate stacking context that prevents z-index issues and ensures portaled components always appear above page contents.
The Base UI docs also mention that for iOS 26+ Safari, the following global style is needed:
body {
position: relative;
}This ensures backdrops work correctly after page scrolling. Should this be included as well?
Based on Base UI's architecture, these components use portals:
- Dialog / AlertDialog
- Popover
- Select
- Menu / Context Menu / Navigation Menu
- Tooltip / Preview Card
- Toast (if using Portal part)
Portal mentions in the docs:
Base UI Quick Start - Portals
Base UI Quick Start - iOS 26+ Safari
Base UI Releases - Portal part requirements