Problem:

When compiling the UHC Portal with FEC, custom CSS styles are not being applied to PatternFly components that render outside the module's root element (e.g., modals, dropdowns, popovers). This occurs because FEC prefixes CSS selectors with a unique scoping class, but components rendered to document.body fall outside this scoped container.

Root Cause:

• FEC compilation prefixes CSS selectors with scoping classes

• PatternFly components like Modal, Select, Dropdown, and Popover render to document.body by default

• These body-rendered components are outside the FEC-scoped container, causing custom styles to not apply

Solution:

Added className="openshift" to components that:

1. Render outside the FEC-scoped container

1. Have custom SCSS styling or contain child components with custom styling

1. Show visible styling issues when rendered outside the scoped container