Fixes #39367 - prevent global override of CSS#11765
Conversation
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📥 CommitsReviewing files that changed from the base of the PR and between 60a38c86d2d52007e67d9f7491bb9ec9658cf4ca and 70604bf. 📒 Files selected for processing (23)
✅ Files skipped from review due to trivial changes (16)
🚧 Files skipped from review as they are similar to previous changes (7)
📝 WalkthroughWalkthroughThis 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. ChangesSCSS Component Scoping and Modernization
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
There was a problem hiding this comment.
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.scsswebpack/components/Bookmark/Bookmark.scsswebpack/components/OptionTooltip/OptionTooltip.scsswebpack/components/RoutedTabs/RoutedTabs.scsswebpack/components/Table/MainTable.scsswebpack/components/TooltipButton/TooltipButton.scsswebpack/components/extensions/HostDetails/Cards/ContentViewDetailsCard/ContentViewDetailsCard.scsswebpack/components/extensions/HostDetails/Cards/ContentViewDetailsCard/_shared-assignment-styles.scsswebpack/components/extensions/HostDetails/Cards/ErrataOverviewCard.scsswebpack/components/extensions/HostDetails/Cards/HostCollectionsCard/HostCollectionsCard.scsswebpack/components/extensions/HostDetails/Cards/SystemPurposeCard/SystemPurposeCard.scsswebpack/components/extensions/HostDetails/Tabs/ErrataTab/ErrataTab.scsswebpack/components/extensions/HostDetails/Tabs/TracesTab/EnableTracerModal.scsswebpack/containers/Application/overrides.scsswebpack/scenes/ContainerImages/Synced/SyncedContainerImagesPage.scsswebpack/scenes/ContentViews/Details/Filters/MatchContentModal/matchContentModal.scsswebpack/scenes/ContentViews/Details/Versions/Compare/CVVersionCompare.scsswebpack/scenes/ContentViews/Details/Versions/ContentViewVersionErrata.scsswebpack/scenes/ContentViews/Publish/cvPublishForm.scsswebpack/scenes/ContentViews/components/EnvironmentPaths/EnvironmentPaths.scsswebpack/scenes/RedHatRepositories/components/RecommendedRepositorySetsToggler.scsswebpack/scenes/RedHatRepositories/index.scsswebpack/scenes/Subscriptions/Manifest/ManageManifestModal.scsswebpack/scenes/Subscriptions/SubscriptionsPage.scsswebpack/scenes/SyncStatus/SyncStatus.scss
💤 Files with no reviewable changes (1)
- webpack/scenes/RedHatRepositories/components/RecommendedRepositorySetsToggler.scss
There was a problem hiding this comment.
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.
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, butwebpack/scenes/ContentViews/Details/Filters/MatchContentModal/matchContentModal.scssoverrides it.Considerations taken when implementing this change?
The css extra classes were AI added. The spaces were added with
--fixarg 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
Refactor