Skip to content

Fixes #39367 - prevent global override of CSS#11765

Merged
jeremylenz merged 1 commit into
Katello:masterfrom
MariaAga:no-css-override
Jun 16, 2026
Merged

Fixes #39367 - prevent global override of CSS#11765
jeremylenz merged 1 commit into
Katello:masterfrom
MariaAga:no-css-override

Conversation

@MariaAga

@MariaAga MariaAga commented May 28, 2026

Copy link
Copy Markdown
Contributor

What are the changes introduced in this pull request?

I ran stylelint from theforeman/foreman#10968
And updated Katello to not override everyones UI.
Found this while looking at empty state for Hosts Index page, and saw that when Katello is not present it has margin-top:100px, but webpack/scenes/ContentViews/Details/Filters/MatchContentModal/matchContentModal.scss overrides it.

Considerations taken when implementing this change?

The css extra classes were AI added. The spaces were added with --fix arg when running stylelint.

What are the testing steps for this pull request?

Please take a look at the effected pages to make sure the styles still apply.

Summary by CodeRabbit

  • Style

    • Improved styling consistency and scoping across multiple UI components.
    • Fixed component positioning and layout for tabs, cards, modals, and tables.
    • Modernized CSS properties for better browser compatibility.
  • Refactor

    • Reorganized stylesheet rules for improved maintainability and specificity.

@coderabbitai

coderabbitai Bot commented May 28, 2026

Copy link
Copy Markdown

Review Change Stack

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: 24427088-3b2a-4be0-8228-9d129fa9c406

📥 Commits

Reviewing files that changed from the base of the PR and between 60a38c86d2d52007e67d9f7491bb9ec9658cf4ca and 70604bf.

📒 Files selected for processing (23)
  • webpack/ForemanColumnExtensions/index.scss
  • webpack/components/Bookmark/Bookmark.scss
  • webpack/components/OptionTooltip/OptionTooltip.scss
  • webpack/components/RoutedTabs/RoutedTabs.scss
  • webpack/components/Table/MainTable.scss
  • webpack/components/TooltipButton/TooltipButton.scss
  • webpack/components/extensions/HostDetails/Cards/ContentViewDetailsCard/ContentViewDetailsCard.scss
  • webpack/components/extensions/HostDetails/Cards/ContentViewDetailsCard/_shared-assignment-styles.scss
  • webpack/components/extensions/HostDetails/Cards/ErrataOverviewCard.scss
  • webpack/components/extensions/HostDetails/Cards/HostCollectionsCard/HostCollectionsCard.scss
  • webpack/components/extensions/HostDetails/Cards/SystemPurposeCard/SystemPurposeCard.scss
  • webpack/components/extensions/HostDetails/Tabs/ErrataTab/ErrataTab.scss
  • webpack/components/extensions/HostDetails/Tabs/TracesTab/EnableTracerModal.scss
  • webpack/containers/Application/overrides.scss
  • webpack/scenes/ContainerImages/Synced/SyncedContainerImagesPage.scss
  • webpack/scenes/ContentViews/Details/Filters/MatchContentModal/matchContentModal.scss
  • webpack/scenes/ContentViews/Details/Versions/Compare/CVVersionCompare.scss
  • webpack/scenes/ContentViews/Details/Versions/ContentViewVersionErrata.scss
  • webpack/scenes/ContentViews/Publish/cvPublishForm.scss
  • webpack/scenes/ContentViews/components/EnvironmentPaths/EnvironmentPaths.scss
  • webpack/scenes/Subscriptions/Manifest/ManageManifestModal.scss
  • webpack/scenes/Subscriptions/SubscriptionsPage.scss
  • webpack/scenes/SyncStatus/SyncStatus.scss
✅ Files skipped from review due to trivial changes (16)
  • webpack/components/extensions/HostDetails/Tabs/TracesTab/EnableTracerModal.scss
  • webpack/scenes/ContentViews/Details/Filters/MatchContentModal/matchContentModal.scss
  • webpack/components/extensions/HostDetails/Cards/SystemPurposeCard/SystemPurposeCard.scss
  • webpack/scenes/Subscriptions/Manifest/ManageManifestModal.scss
  • webpack/scenes/ContentViews/components/EnvironmentPaths/EnvironmentPaths.scss
  • webpack/scenes/Subscriptions/SubscriptionsPage.scss
  • webpack/components/extensions/HostDetails/Cards/ErrataOverviewCard.scss
  • webpack/components/Table/MainTable.scss
  • webpack/components/extensions/HostDetails/Cards/ContentViewDetailsCard/ContentViewDetailsCard.scss
  • webpack/components/OptionTooltip/OptionTooltip.scss
  • webpack/scenes/ContentViews/Details/Versions/Compare/CVVersionCompare.scss
  • webpack/ForemanColumnExtensions/index.scss
  • webpack/scenes/SyncStatus/SyncStatus.scss
  • webpack/components/TooltipButton/TooltipButton.scss
  • webpack/components/extensions/HostDetails/Cards/HostCollectionsCard/HostCollectionsCard.scss
  • webpack/scenes/ContentViews/Details/Versions/ContentViewVersionErrata.scss
🚧 Files skipped from review as they are similar to previous changes (7)
  • webpack/components/RoutedTabs/RoutedTabs.scss
  • webpack/scenes/ContainerImages/Synced/SyncedContainerImagesPage.scss
  • webpack/scenes/ContentViews/Publish/cvPublishForm.scss
  • webpack/components/extensions/HostDetails/Tabs/ErrataTab/ErrataTab.scss
  • webpack/components/Bookmark/Bookmark.scss
  • webpack/components/extensions/HostDetails/Cards/ContentViewDetailsCard/_shared-assignment-styles.scss
  • webpack/containers/Application/overrides.scss

📝 Walkthrough

Walkthrough

This PR modernizes SCSS stylesheets across 24 component and page-level files by scoping component styles under OUIA identifiers, updating CSS syntax to current standards (overflow-wrap, gap, ::after), refining selector specificity, and applying whitespace cleanup.

Changes

SCSS Component Scoping and Modernization

Layer / File(s) Summary
OUIA Component Scoping Pattern
webpack/components/Bookmark/Bookmark.scss, webpack/components/extensions/HostDetails/Cards/ContentViewDetailsCard/ContentViewDetailsCard.scss, webpack/components/extensions/HostDetails/Tabs/TracesTab/EnableTracerModal.scss, webpack/scenes/ContentViews/Details/Filters/MatchContentModal/matchContentModal.scss, webpack/scenes/ContainerImages/Synced/SyncedContainerImagesPage.scss, webpack/scenes/SyncStatus/SyncStatus.scss, webpack/components/RoutedTabs/RoutedTabs.scss
Dropdown, modal, card, and table styles are scoped under [data-ouia-component-id="..."] attribute selectors to isolate component styling and ensure styles apply only to the intended component instances.
CSS Property and Syntax Modernization
webpack/containers/Application/overrides.scss, webpack/scenes/ContentViews/Publish/cvPublishForm.scss, webpack/scenes/ContentViews/Details/Versions/ContentViewVersionErrata.scss, webpack/scenes/ContentViews/components/EnvironmentPaths/EnvironmentPaths.scss
Deprecated CSS properties and syntax are updated: word-wrap: break-word becomes overflow-wrap: break-word for table cells, grid-gap becomes gap for layout spacing, and :after pseudo-element syntax is corrected to ::after.
Selector Scope and Specificity Refinement
webpack/ForemanColumnExtensions/index.scss, webpack/containers/Application/overrides.scss, webpack/components/extensions/HostDetails/Tabs/ErrataTab/ErrataTab.scss, webpack/components/extensions/HostDetails/Cards/ContentViewDetailsCard/_shared-assignment-styles.scss
Selector scopes are refined by moving global rules into component-specific contexts (inline-edit override under subscriptions-page, toggle-group color rule under errata-tab, hr styling into expandable-section), adjusting toolbar form-group selector lists, and adding component-scoped padding rules.
Whitespace and Formatting Cleanup
webpack/components/OptionTooltip/OptionTooltip.scss, webpack/components/Table/MainTable.scss, webpack/components/TooltipButton/TooltipButton.scss, webpack/components/extensions/HostDetails/Cards/ErrataOverviewCard.scss, webpack/components/extensions/HostDetails/Cards/HostCollectionsCard/HostCollectionsCard.scss, webpack/components/extensions/HostDetails/Cards/SystemPurposeCard/SystemPurposeCard.scss, webpack/scenes/ContentViews/Details/Versions/Compare/CVVersionCompare.scss, webpack/scenes/ContentViews/components/EnvironmentPaths/EnvironmentPaths.scss, webpack/scenes/Subscriptions/Manifest/ManageManifestModal.scss, webpack/scenes/Subscriptions/SubscriptionsPage.scss
Blank lines are inserted within component blocks, selector indentation is normalized, and line-breaking is adjusted for code readability without modifying style rules or declarations.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

  • Katello/katello#11693: Both PRs adjust webpack/components/RoutedTabs/RoutedTabs.scss to refine PatternFly v5 tabs styling and scoping for the routed-tabs container.

Suggested reviewers

  • vsedmik
  • lfu
  • jnagare-redhat
🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title 'Fixes #39367 - prevent global override of CSS' accurately and concisely summarizes the main objective of the pull request: preventing global CSS overrides through scoping selectors with OUIA attributes.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

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

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

@MariaAga MariaAga changed the title Fixed #39367 - prevent global override of CSS Fixes #39367 - prevent global override of CSS May 28, 2026

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@webpack/scenes/RedHatRepositories/index.scss`:
- Around line 5-7: The .row-eq-height rule contains an invalid display value and
a duplicate; remove the line with "display: flexbox" (invalid) and keep only a
single "display: flex" declaration in the .row-eq-height selector so the rule
has one valid display property; update the SCSS where the .row-eq-height block
is defined (look for the .row-eq-height selector) to remove the extra/invalid
lines.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: b7a53d8c-e9e1-4706-a0b3-cf525b5c3bbc

📥 Commits

Reviewing files that changed from the base of the PR and between 6027570 and 60a38c86d2d52007e67d9f7491bb9ec9658cf4ca.

📒 Files selected for processing (25)
  • webpack/ForemanColumnExtensions/index.scss
  • webpack/components/Bookmark/Bookmark.scss
  • webpack/components/OptionTooltip/OptionTooltip.scss
  • webpack/components/RoutedTabs/RoutedTabs.scss
  • webpack/components/Table/MainTable.scss
  • webpack/components/TooltipButton/TooltipButton.scss
  • webpack/components/extensions/HostDetails/Cards/ContentViewDetailsCard/ContentViewDetailsCard.scss
  • webpack/components/extensions/HostDetails/Cards/ContentViewDetailsCard/_shared-assignment-styles.scss
  • webpack/components/extensions/HostDetails/Cards/ErrataOverviewCard.scss
  • webpack/components/extensions/HostDetails/Cards/HostCollectionsCard/HostCollectionsCard.scss
  • webpack/components/extensions/HostDetails/Cards/SystemPurposeCard/SystemPurposeCard.scss
  • webpack/components/extensions/HostDetails/Tabs/ErrataTab/ErrataTab.scss
  • webpack/components/extensions/HostDetails/Tabs/TracesTab/EnableTracerModal.scss
  • webpack/containers/Application/overrides.scss
  • webpack/scenes/ContainerImages/Synced/SyncedContainerImagesPage.scss
  • webpack/scenes/ContentViews/Details/Filters/MatchContentModal/matchContentModal.scss
  • webpack/scenes/ContentViews/Details/Versions/Compare/CVVersionCompare.scss
  • webpack/scenes/ContentViews/Details/Versions/ContentViewVersionErrata.scss
  • webpack/scenes/ContentViews/Publish/cvPublishForm.scss
  • webpack/scenes/ContentViews/components/EnvironmentPaths/EnvironmentPaths.scss
  • webpack/scenes/RedHatRepositories/components/RecommendedRepositorySetsToggler.scss
  • webpack/scenes/RedHatRepositories/index.scss
  • webpack/scenes/Subscriptions/Manifest/ManageManifestModal.scss
  • webpack/scenes/Subscriptions/SubscriptionsPage.scss
  • webpack/scenes/SyncStatus/SyncStatus.scss
💤 Files with no reviewable changes (1)
  • webpack/scenes/RedHatRepositories/components/RecommendedRepositorySetsToggler.scss

Comment thread webpack/scenes/RedHatRepositories/index.scss Outdated

@nofaralfasi nofaralfasi left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested UI - looks good

I manually tested the affected UI on a Katello dev environment with this branch applied. Everything looked correct, I didn’t see any obvious spacing, layout, or styling regressions.

Hosts index empty state - spacing looks correct (no longer cramped at the top)
Content view filter → View matching content modal (RPM filter with rules)
Host details → Overview - Content view details, Host collections, Errata, and System purpose cards
Host details → Content → Errata tab (toggle group, bookmarks)
Host details → Traces tab (Enable Tracer modal)
Content view details - tab bar / routed tabs across Versions, Filters, Repositories, etc.
Content view publish wizard (environment paths)
Content view version compare
Content view version errata counts
Sync status (sticky toolbar / table header)
Container images - synced table
Subscriptions (inline edit, Manage manifest modal, toolbar)
Red Hat repositories (layout / search)

No issues found from this pass. LGTM from a UI perspective.

Note (pre-existing, out of scope): /subscriptions/add page appears to be missing top margin. I confirmed this on the base branch as well, so it doesn’t look introduced by this PR.

@jeremylenz
jeremylenz merged commit fab9abb into Katello:master Jun 16, 2026
22 of 23 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants