Search within Log viewer can cause the parent container to shift and break the layout, when embedded in a scrollable parent
Chưa có ai nhận issue này.
Đánh giá
- Độ khó
- 3/5
- Thời gian dự kiến
- 1-2 ngày
- Mức phù hợp với người mới
- 67/100
- Loại issue
- Lỗi
- Độ rõ ràng
- Đặc tả rõ ràng
- Mức độ hoạt động
- Ít trao đổi
- Công nghệ
- typescript
- Lĩnh vực
- frontend
Hướng nghiên cứu
Start by reproducing the horizontal shift with the linked CodeSandbox, then read packages/module/src/LogViewer/LogViewer.tsx around lines 129-134 and inspect the log viewer scroll container. Verify that searching with isTextWrapped={false} scrolls only that container, leaving embedded ancestors unchanged; confirm the reproduction no longer shifts its parent layout.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Mô tả
Summary
When LogViewer is embedded inside a scrollable ancestor (e.g., PatternFly Drawer), searching with isTextWrapped={false} causes the entire page layout to shift horizontally. The scrollIntoView({ block: 'nearest', inline: 'center' }) call in LogViewer.js:132 scrolls all scrollable ancestors per the CSSOM View spec, not just the log viewer's own scroll container.
Description
When searching in LogViewer with text wrapping disabled (isTextWrapped={false}), the component calls scrollIntoView({ block: 'nearest', inline: 'center' }) on the matched .pf-v6-c-log-viewer__string.pf-m-current element (LogViewer.js:129-134):
if (!isTextWrapped) {
setTimeout(() => {
const element = containerRef.current.querySelector('.pf-v6-c-log-viewer__string.pf-m-current');
element && element.scrollIntoView({ block: 'nearest', inline: 'center' });
}, 1);
}
Per the CSSOM View spec, scrollIntoView scrolls all scrollable ancestors, not just the nearest one. This means any parent element with overflow: auto or overflow: hidden (which is still a scroll container) will also be scrolled horizontally.
Reproduction
A minimal reproduction is available here:
Search for the string dial and the entire Log View shifts to the left.
https://codesandbox.io/p/devbox/adoring-gianmarco-jysx57?file=%2Findex.js%3A57%2C27&workspaceId=ws_DaxE3H6rUUo4d5D65eiKhT
Expected behavior
Only the log viewer's own scroll container (.pf-v6-c-log-viewer__scroll-container) should scroll horizontally. Ancestor containers should not be affected.
OCP Console related issue and workaround
In OpenShift Console (OCPBUGS-74156), this causes the entire page to shift left when searching pod logs, because the LogViewer is nested inside a PatternFly Drawer whose .pf-v6-c-drawer__main has overflow: hidden -- which still acts as a scroll container for scrollIntoView.
As a workaround until this is addressed upstream, OpenShift Console plans to override (UPDATE) overflow: clip caused another bug in our list pageoverflow: hidden to overflow: clip on .pf-v6-c-drawer__main via a CSS override
CSS-only approaches were investigated but ruled out. The follow up PR #74156 Adds a scroll event listener in ResourceLog that resets scrollLeft to 0 on .pf-v6-c-drawer__main, preventing the page shift.
Jira Issue: PF-3815
- Ngôn ngữ chính
- TypeScript
- Star
- 34
- Fork
- 19
- Chỉ số merge pull request
- Không có pull request nào được merge trong 30 ngày
Hướng dẫn đóng góp
Bắt đầu từ đâu
- Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
- Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
- Fork repository và làm thay đổi trên một nhánh.
- Mở pull request có tham chiếu số hiệu của issue.
Issue khác của patternfly/react-log-viewer
-
Độ khó 3/5 1-2 ngày Mức phù hợp với người mới 45/100
patternfly/react-log-viewer#101 ·
-
Độ khó 3/5 1-2 ngày Mức phù hợp với người mới 25/100
patternfly/react-log-viewer#98 · 1 bình luận ·
-
How to set search text by props? Đang mở
Độ khó 3/5 1-2 ngày Mức phù hợp với người mới 25/100
patternfly/react-log-viewer#95 · 2 bình luận ·
-
Độ khó 3/5 1-2 ngày Mức phù hợp với người mới 35/100
patternfly/react-log-viewer#91 · 1 bình luận ·
-
Độ khó 3/5 1-2 ngày Mức phù hợp với người mới 35/100
patternfly/react-log-viewer#85 · 1 bình luận ·
Tất cả issue của patternfly/react-log-viewer
Issue tương tự
-
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 84/100
bcgov/bc-wallet-mobile#4761 · 1 bình luận ·
-
external-issue to-triage
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 88/100
-
area-deployment area-integrations triage:bot-seen
Độ khó 2/5 Nửa ngày Mức phù hợp với người mới 86/100
-
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 82/100
-
refactor
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 84/100