OCPBUGS-74156: Prevent pod log search from shifting page layout by sg00dwin · Pull Request #16223 · openshift/console

sg00dwin · 2026-03-30T19:23:09Z

Bug

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

The original fix #16193, using css only, introduced another bug on the Pods List, so it will be reverted with #16218

Root Cause

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

A css-only fix is not available, so this adds a scroll event listener in ResourceLog that resets scrollLeft to 0 on .pf-v6-c-drawer__main, preventing the page shift. CSS-only approaches were investigated but ruled out.

Assisted by Claude code

After

Summary by CodeRabbit

Bug Fixes
- Fixed scroll position behavior in the resource log drawer when displayed in fullscreen mode.

openshift-ci-robot · 2026-03-30T19:23:17Z

@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

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

Details

In response to this:

Bug

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

The original fix #16193, using css only, introduced another bug on the Pods List, so it will be reverted with #16218

Root Cause

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

A css-only fix is not available, so this adds a scroll event listener in ResourceLog that resets scrollLeft to 0 on .pf-v6-c-drawer__main, preventing the page shift. CSS-only approaches were investigated but ruled out:

overflow: clip on .pf-v6-c-drawer__main fixes the shift but breaks vertical scrolling on other pages (e.g., pod list)

overflow-x: clip is silently converted to hidden per CSS spec when the other axis isn't clip

overflow: clip on the LogViewer wrapper doesn't block scrollIntoView propagation to higher ancestors

Assisted by Claude code

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.

openshift-ci-robot · 2026-03-30T19:25:57Z

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

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 POST, which is one of the valid states (NEW, ASSIGNED, POST)

Requesting review from QA contact:
/cc @yapei

Details

In response to this:

Bug

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

The original fix #16193, using css only, introduced another bug on the Pods List, so it will be reverted with #16218

Root Cause

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

A css-only fix is not available, so this adds a scroll event listener in ResourceLog that resets scrollLeft to 0 on .pf-v6-c-drawer__main, preventing the page shift. CSS-only approaches were investigated but ruled out:

overflow: clip on .pf-v6-c-drawer__main fixes the shift but breaks vertical scrolling on other pages (e.g., pod list)

overflow-x: clip is silently converted to hidden per CSS spec when the other axis isn't clip

overflow: clip on the LogViewer wrapper doesn't block scrollIntoView propagation to higher ancestors

Assisted by Claude code

After

Summary by CodeRabbit

Bug Fixes

Fixed scroll position behavior in the resource log drawer when displayed in fullscreen mode.

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 · 2026-03-30T19:28:04Z

📝 Walkthrough

Walkthrough

A useEffect hook has been added to the ResourceLog component that attaches a scroll event listener to the .pf-v6-c-drawer__main ancestor when fullscreenRef is present. The listener forcibly resets the drawer's scrollLeft property to 0 on each scroll event to maintain horizontal scroll position. The effect properly handles cleanup of the event listener on unmount and dependency changes, with lifecycle tied to the fullscreenRef reference.

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

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

coderabbitai

🧹 Nitpick comments (1)

frontend/public/components/utils/resource-log.tsx (1)
815-827: Scope the scroll-reset listener to nowrap mode only

This listener is currently active for all log-view states. Since the bug occurs with wrap disabled, keep this effect gated by !wrapLinesCheckbox so we avoid unnecessary global scroll interception and event churn.
Proposed change
  useEffect(() => {
+   if (wrapLinesCheckbox) {
+     return;
+   }
    const drawerMain = fullscreenRef.current?.closest('.pf-v6-c-drawer__main');
    if (!drawerMain) {
      return;
    }
    const resetScroll = () => {
      if (drawerMain.scrollLeft !== 0) {
        drawerMain.scrollLeft = 0;
      }
    };
    drawerMain.addEventListener('scroll', resetScroll);
    return () => drawerMain.removeEventListener('scroll', resetScroll);
- }, [fullscreenRef]);
+ }, [fullscreenRef, wrapLinesCheckbox]);
As per coding guidelines, "**: -Focus on major issues impacting performance, readability, maintainability and security. Avoid nitpicks and avoid verbosity."
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@frontend/public/components/utils/resource-log.tsx` around lines 815 - 827,
The scroll-reset effect (useEffect) currently attaches resetScroll to drawerMain
unconditionally; change it to run only when wrapLinesCheckbox is false by adding
wrapLinesCheckbox to the dependency array and early-return if wrapLinesCheckbox
is true; keep the existing resetScroll, add/remove listener logic tied to
drawerMain, and ensure cleanup still removes the listener when wrapLinesCheckbox
toggles or fullscreenRef changes (useEffect deps: [fullscreenRef,
wrapLinesCheckbox]).

🤖 Prompt for all review comments with AI agents

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

Nitpick comments:
In `@frontend/public/components/utils/resource-log.tsx`:
- Around line 815-827: The scroll-reset effect (useEffect) currently attaches
resetScroll to drawerMain unconditionally; change it to run only when
wrapLinesCheckbox is false by adding wrapLinesCheckbox to the dependency array
and early-return if wrapLinesCheckbox is true; keep the existing resetScroll,
add/remove listener logic tied to drawerMain, and ensure cleanup still removes
the listener when wrapLinesCheckbox toggles or fullscreenRef changes (useEffect
deps: [fullscreenRef, wrapLinesCheckbox]).

ℹ️ Review info

⚙️ Run configuration

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

Review profile: CHILL

Plan: Pro

Run ID: ff9fb777-115e-4195-9bf1-4e5e3216d78b

📥 Commits

Reviewing files that changed from the base of the PR and between 703563f and 09a8893.

📒 Files selected for processing (1)

frontend/public/components/utils/resource-log.tsx

📜 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/components/utils/resource-log.tsx

Leo6Leo · 2026-03-31T13:56:35Z

/retest-required

openshift-ci · 2026-03-31T18:45:25Z

@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 · 2026-04-02T15:07:39Z

/lgtm
/hold for #16218 to merge first

openshift-ci · 2026-04-02T15:08:01Z

[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/OWNERS~~ [rhamilto]

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

rhamilto · 2026-04-02T15:09:55Z

cc: @logonoff since #16108 is also changing resource-log.tsx.

logonoff · 2026-04-02T15:15:27Z

frontend/public/components/utils/resource-log.tsx

+  // Workaround for upstream PF LogViewer bug: scrollIntoView({ inline: 'center' }) propagates
+  // to all scrollable ancestors, shifting the page layout when searching with wrap lines disabled.
+  // Reset scrollLeft on .pf-v6-c-drawer__main to prevent the page shift.
+  // https://github.com/patternfly/react-log-viewer/issues/106


Can we contribute this upstream if a backport isn't needed?

openshift-ci-robot · 2026-04-03T19:06:23Z

@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:

Bug

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

The original fix #16193, using css only, introduced another bug on the Pods List, so it will be reverted with #16218

Root Cause

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

A css-only fix is not available, so this adds a scroll event listener in ResourceLog that resets scrollLeft to 0 on .pf-v6-c-drawer__main, preventing the page shift. CSS-only approaches were investigated but ruled out.

Assisted by Claude code

After

Summary by CodeRabbit

Bug Fixes

Fixed scroll position behavior in the resource log drawer when displayed in fullscreen mode.

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-merge-robot · 2026-04-04T19:57:51Z

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

Prevent pod log search from shifting page layout

09a8893

sg00dwin assigned rhamilto Mar 30, 2026

openshift-ci-robot added jira/valid-reference Indicates that this PR references a valid Jira ticket of any type. jira/valid-bug Indicates that a referenced Jira bug is valid for the branch this PR is targeting. labels Mar 30, 2026

openshift-ci bot requested review from Leo6Leo, cajieh and yapei March 30, 2026 19:23

openshift-ci bot added the component/core Related to console core functionality label Mar 30, 2026

coderabbitai bot reviewed Mar 30, 2026

View reviewed changes

sg00dwin mentioned this pull request Mar 31, 2026

Search within Log viewer can cause the parent container to shift and break the layout, when embedded in a scrollable parent patternfly/react-log-viewer#106

Open

openshift-ci bot added do-not-merge/hold Indicates that a PR should not merge because someone has issued a /hold command. lgtm Indicates that a PR is ready to be merged. labels Apr 2, 2026

openshift-ci bot added the approved Indicates a PR has been approved by an approver from all required OWNERS files. label Apr 2, 2026

logonoff reviewed Apr 2, 2026

View reviewed changes

openshift-ci-robot mentioned this pull request Apr 3, 2026

Revert "OCPBUGS-74156: Prevent pod log viewer from shifting page layout when searching" #16218

Merged

sg00dwin added verified Signifies that the PR passed pre-merge verification criteria and removed do-not-merge/hold Indicates that a PR should not merge because someone has issued a /hold command. labels Apr 3, 2026

openshift-merge-bot bot merged commit e672e69 into openshift:main Apr 3, 2026
8 checks passed

Conversation

sg00dwin commented Mar 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bug

Root Cause

Fix

Summary by CodeRabbit

Uh oh!

openshift-ci-robot commented Mar 30, 2026

Bug

Root Cause

Fix

Uh oh!

openshift-ci-robot commented Mar 30, 2026

Bug

Root Cause

Fix

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Mar 30, 2026

Walkthrough

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Leo6Leo commented Mar 31, 2026

Uh oh!

openshift-ci bot commented Mar 31, 2026

Uh oh!

rhamilto commented Apr 2, 2026

Uh oh!

openshift-ci bot commented Apr 2, 2026

Uh oh!

rhamilto commented Apr 2, 2026

Uh oh!

logonoff Apr 2, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

openshift-ci-robot commented Apr 3, 2026

Bug

Root Cause

Fix

Summary by CodeRabbit

Uh oh!

openshift-merge-robot commented Apr 4, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

sg00dwin commented Mar 30, 2026 •

edited

Loading