fix(compass): add opt-out for small screen warning by mcoker · Pull Request #8153 · patternfly/patternfly

mcoker · 2026-02-18T21:06:45Z

Summary by CodeRabbit

New Features
- Added a new modifier option to the compass component, enabling customization of behavior on smaller viewports and improving responsive layout handling.
Documentation
- Updated component documentation with usage details for the new modifier.

coderabbitai · 2026-02-18T21:07:08Z

Walkthrough

The Compass component now supports an opt-out modifier class (.pf-m-no-screen-warning) that allows the layout to remain functional on smaller screens by conditionally disabling the responsive view warning. The SCSS rule set was updated to check for this modifier before applying narrow-screen hiding behavior.

Changes

Cohort / File(s)	Summary
Compass SCSS Logic `src/patternfly/components/Compass/compass.scss`	Modified narrow-screen media query to conditionally apply hiding using `:not(.pf-m-no-screen-warning)` selector, allowing the compass layout to function on smaller viewports when the opt-out modifier is present. Added visible overlay message block for narrow screens.
Compass Documentation `src/patternfly/components/Compass/examples/Compass.md`	Added documentation entry for the new `.pf-m-no-screen-warning` modifier in the usage table, describing its role in disabling the screen warning on smaller viewports.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Suggested reviewers

kmcfaul

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title follows conventional commit format (fix: scope) and accurately describes the main change of adding an opt-out mechanism for the small screen warning.
Linked Issues check	✅ Passed	The PR successfully implements the opt-out mechanism requested in `#8151` by introducing the pf-m-no-screen-warning modifier that allows users to disable the responsive behavior on smaller screens.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to implementing the requested opt-out feature: SCSS conditional logic for the modifier, documentation of the new modifier, and no extraneous modifications.

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

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

patternfly-build · 2026-02-18T21:09:32Z

Preview: https://pf-pr-8153.surge.sh

A11y report: https://pf-pr-8153-a11y.surge.sh

coderabbitai

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/patternfly/components/Compass/compass.scss (1)
337-338: 🧹 Nitpick | 🔵 Trivial

Optional: remove dead width: 80% declaration.

width: 80%; is immediately overridden by width: 300px; on the following line. The first declaration is never applied.
♻️ Proposed fix
-      width: 80%;
       width: 300px;
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/patternfly/components/Compass/compass.scss` around lines 337 - 338,
Remove the redundant width declaration by deleting the earlier "width: 80%;"
line in the CSS rule that also contains "width: 300px;" (the block around the
Compass component in compass.scss), leaving only "width: 300px;" so the rule is
not shadowed by a dead property.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Outside diff comments:
In `@src/patternfly/components/Compass/compass.scss`:
- Around line 337-338: Remove the redundant width declaration by deleting the
earlier "width: 80%;" line in the CSS rule that also contains "width: 300px;"
(the block around the Compass component in compass.scss), leaving only "width:
300px;" so the rule is not shadowed by a dead property.

mattnolting

LPTM 👍

patternfly-build · 2026-02-19T15:59:05Z

🎉 This PR is included in version 6.5.0-prerelease.43 🎉

The release is available on:

Your semantic-release bot 📦🚀

mcoker requested a review from mattnolting February 18, 2026 21:06

coderabbitai Bot requested a review from kmcfaul February 18, 2026 21:07

fix(compass): add opt-out for small screen warning

6e7d1c2

mcoker force-pushed the issue-8151 branch from 937114e to 6e7d1c2 Compare February 18, 2026 21:08

coderabbitai Bot reviewed Feb 18, 2026

View reviewed changes

mattnolting approved these changes Feb 19, 2026

View reviewed changes

mcoker merged commit c6c8cd4 into patternfly:main Feb 19, 2026
5 checks passed

mcoker deleted the issue-8151 branch February 19, 2026 15:50

patternfly-build added the released on @prerelease label Feb 19, 2026

coderabbitai Bot mentioned this pull request Mar 11, 2026

Panel - update to support compass panel features #8055

Closed

coderabbitai Bot mentioned this pull request Mar 25, 2026

Compass - update demos to use unified tabs #8089

Closed

coderabbitai Bot mentioned this pull request Apr 13, 2026

feat: add compass panel features to panel component #8303

Merged

This was referenced Apr 28, 2026

Bug - Compass - shadows are cut off in main layout #8344

Closed

Move Compass component docs/demos from generative-ai to components section (core) #8355

Closed

chore(Compass): move docs to 'components' #8357

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(compass): add opt-out for small screen warning#8153

fix(compass): add opt-out for small screen warning#8153
mcoker merged 1 commit into
patternfly:mainfrom
mcoker:issue-8151

mcoker commented Feb 18, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Feb 18, 2026 •

edited

Loading

Uh oh!

patternfly-build commented Feb 18, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot left a comment

Uh oh!

mattnolting left a comment

Uh oh!

Uh oh!

patternfly-build commented Feb 19, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

mcoker commented Feb 18, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Feb 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Suggested reviewers

Uh oh!

patternfly-build commented Feb 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

mattnolting left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

patternfly-build commented Feb 19, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

mcoker commented Feb 18, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Feb 18, 2026 •

edited

Loading

patternfly-build commented Feb 18, 2026 •

edited

Loading