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

[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

[sg00dwin]

/cherry-pick release-4.21

[openshift-cherrypick-robot]

@sg00dwin: once the present PR merges, I will cherry-pick it on top of release-4.21 in a new PR and assign it to you.

Details

In response to this:

/cherry-pick release-4.21

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.

[openshift-ci-robot]

@sg00dwin: Jira Issue Verification Checks: Jira Issue OCPBUGS-74156
✔️ This pull request was pre-merge verified.
✔️ All associated pull requests have merged.
✔️ All associated, merged pull requests were pre-merge verified.

Jira Issue OCPBUGS-74156 has been moved to the MODIFIED state and will move to the VERIFIED state when the change is available in an accepted nightly payload. 🕓

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

Summary by CodeRabbit

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

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.

[openshift-cherrypick-robot]

@sg00dwin: #16193 failed to apply on top of branch "release-4.21":

Applying: Prevent pod log search from shifting page layout Workaround for upstream PF LogViewer bug where scrollIntoView propagates to ancestor scroll containers when wrap lines is disabled
.git/rebase-apply/patch:13: trailing whitespace.
// Upstream PatternFly LogViewer bug https://github.com/patternfly/react-log-viewer/issues/106 
.git/rebase-apply/patch:15: trailing whitespace.
// Workaround: Apply overflow: clip to remove the element from being a scroll container entirely, so scrollIntoView skips it. 
.git/rebase-apply/patch:16: trailing whitespace.
// This prevents the page shift without affecting the log viewer's own horizontal scrolling. 
warning: 3 lines add whitespace errors.
Using index info to reconstruct a base tree...
M	frontend/public/style/_overrides.scss
Falling back to patching base and 3-way merge...
Auto-merging frontend/public/style/_overrides.scss
CONFLICT (content): Merge conflict in frontend/public/style/_overrides.scss
error: Failed to merge in the changes.
hint: Use 'git am --show-current-patch=diff' to see the failed patch
hint: When you have resolved this problem, run "git am --continue".
hint: If you prefer to skip this patch, run "git am --skip" instead.
hint: To restore the original branch and stop patching, run "git am --abort".
hint: Disable this message with "git config set advice.mergeConflict false"
Patch failed at 0001 Prevent pod log search from shifting page layout Workaround for upstream PF LogViewer bug where scrollIntoView propagates to ancestor scroll containers when wrap lines is disabled

Details

In response to this:

/cherry-pick release-4.21

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.

[adamviktora]

Hi @sg00dwin @rhamilto

we noticed a regression after this PR (double scrollbar, top panel not sticky), affecting also other dynamic plugins.

Before:

Screen.Recording.2026-03-30.at.16.05.55.mov

After:

Screen.Recording.2026-03-30.at.16.05.42.mov

Can this change be reverted?

[openshift-merge-robot]

Fix included in accepted release 4.22.0-0.nightly-2026-04-04-113332