OCPBUGS-74156: Prevent pod log viewer from shifting page layout when searching

[sg00dwin]

Description:

When viewing pod logs with "Wrap lines" disabled, searching for a string causes the entire page content to shift left, and to be partially hidden behind the sidebar navigation.

Root Cause

This is an upstream PatternFly bug (react-log-viewer#106). PF LogViewer calls scrollIntoView({ inline: 'center' }) on search matches, which per the CSSOM View spec scrolls all scrollable ancestors — not just the log viewer's own container. PF Drawer sets overflow: hidden on .pf-v6-c-drawer__main, which still acts as a scroll container for programmatic scrolling, causing the entire page to shift.

Fix

Override overflow: hidden to overflow: clip on .pf-v6-c-drawer__main, scoped within the parent #content div. The clip value has identical visual clipping but removes the element from being a scroll container entirely, so scrollIntoView skips it. This prevents the page shift without affecting the log viewer's own horizontal scrolling.

Verification

• Tested with pod generating 2000+ log lines, searching "dial" with wrap lines disabled — page layout remains stable
• Log viewer horizontal scroll within its own container still works correctly
• No regressions on drawer panels (QuickStart, notification drawer, resource details)

Assisted by Claude code

Before

After

Summary by CodeRabbit

• Bug Fixes
  • Fixed unexpected horizontal page shifts when searching pod logs with line wrapping disabled.

[openshift-ci-robot]

@sg00dwin: This pull request references Jira Issue OCPBUGS-74156, which is invalid:

• expected the bug to target the "4.22.0" version, but no target version was set

Comment /jira refresh to re-evaluate validity if changes to the Jira bug are made, or edit the title of this pull request to link to a different bug.

The bug has been updated to refer to the pull request using the external bug tracker.

Details

In response to this:

Description:

When viewing pod logs with "Wrap lines" disabled, searching for a string causes the entire page content to shift left, and to be partially hidden behind the sidebar navigation.

Root Cause

This is an upstream PatternFly bug (react-log-viewer#106). PF LogViewer calls scrollIntoView({ inline: 'center' }) on search matches, which per the CSSOM View spec scrolls all scrollable ancestors — not just the log viewer's own container. PF Drawer sets overflow: hidden on .pf-v6-c-drawer__main, which still acts as a scroll container for programmatic scrolling, causing the entire page to shift.

Fix

Override overflow: hidden to overflow: clip on .pf-v6-c-drawer__main, scoped within the parent #content div. The clip value has identical visual clipping but removes the element from being a scroll container entirely, so scrollIntoView skips it. This prevents the page shift without affecting the log viewer's own horizontal scrolling.

Verification

• Tested with pod generating 2000+ log lines, searching "dial" with wrap lines disabled — page layout remains stable
• Log viewer horizontal scroll within its own container still works correctly
• No regressions on drawer panels (QuickStart, notification drawer, resource details)

Assisted by Claude code

Before

After

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository.

[sg00dwin]

/jira refresh

[openshift-ci-robot]

@sg00dwin: This pull request references Jira Issue OCPBUGS-74156, which is valid. The bug has been moved to the POST state.

3 validation(s) were run on this bug

• bug is open, matching expected state (open)
• bug target version (4.22.0) matches configured target version for branch (4.22.0)
• bug is in the state ASSIGNED, which is one of the valid states (NEW, ASSIGNED, POST)

Requesting review from QA contact:
/cc @yapei

Details

In response to this:

/jira refresh

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository YAML (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: 4d77ff8a-2555-4f63-81c0-fdb48b975fd3

📥 Commits

Reviewing files that changed from the base of the PR and between 1425db6 and 6b68495.

📒 Files selected for processing (1)

• frontend/public/style/_overrides.scss

📜 Recent review details

🧰 Additional context used

📓 Path-based instructions (1)

**

⚙️ CodeRabbit configuration file

-Focus on major issues impacting performance, readability, maintainability and security. Avoid nitpicks and avoid verbosity.

Files:

• frontend/public/style/_overrides.scss

🔇 Additional comments (1)

frontend/public/style/_overrides.scss (1)

47-53: overflow: clip workaround is well-scoped and addresses the root cause.

Line 51 keeps the override constrained to #content, and Line 52 prevents the drawer main from acting as a scroll container during scrollIntoView, which matches the reported behavior and fix intent.

---

📝 Walkthrough

Walkthrough

This change introduces a targeted CSS override in frontend/public/style/_overrides.scss by adding an overflow: clip property to the #content .pf-v6-c-drawer__main selector. The modification addresses a specific PatternFly LogViewer rendering issue where scrollIntoView operations trigger unintended horizontal scrolling or page shifts in the drawer's main container. This occurs specifically during pod log searching when line wrapping is disabled. No existing styles were altered, and the change is purely additive with eight lines inserted.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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

[openshift-ci]

@sg00dwin: all tests passed!

Full PR test history. Your PR dashboard.

Details

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository. I understand the commands that are listed here.

[rhamilto]

/lgtm

[openshift-ci]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: rhamilto, sg00dwin

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Details

Needs approval from an approver in each of these files:

• frontend/public/style/OWNERS [rhamilto,sg00dwin]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment