Fix unexpected log line details pop-up in log viewer UI

[doanxem99]

Description

This PR fixes the unexpected log line details popup behavior in the Logs viewer.

Before this change, clicking anywhere on a log line immediately opens the "Log line details" dialog

Root cause: The entire log line binded a click handler that opened the dialog, so any click on that line would trigger it.

Expected behavior:

• Hovering a log line (with structured JSON) shows a "Show details" button, and the dialog only opens when that button is clicked
• Non-JSON log lines do not show the "Show details" button at all
• Prevents confusing behavior where hover area and button visibility become inconsistent after horizontal scrolling.

Demo of the fix:

Video_Demo_LR.mp4

Related issues

Fixes #52347

Additional information

Implementation notes:

• Show details remains rendered only for structured JSON lines (formattedLogLine !== null).
• Hover behavior is handled via CSS/sx instead of per-row React hover state to keep rendering lightweight.
• Button placement remains pinned to the visible right edge during horizontal scrolling by using a scroll-offset CSS variable.
• Row hover hit area is extended in a minimal way so hovering blank area on the same row can still reveal the button after horizontal scroll.

How i tested it:

1. Start Ray dashboard backend (port 8265) and frontend (npm start, open http://localhost:3000/#/logs).
2. Open a log file that includes JSON lines.
3. Verify baseline behavior:
   • Clicking a log row does not automatically open details.
   • Hovering a JSON row shows Show details.
   • Clicking Show details opens the dialog.
4. Verify horizontal-scroll behavior:
   • Use a long JSON line and scroll horizontally.
   • Hover on the same row (including blank area within that row's visible line).
   • Confirm Show details still appears and remains pinned at the visible right edge.
5. Verify non-JSON behavior:
   • On plain text rows, Show details should not render.

Contributors:
23127088 - Nguyễn Đình Mạnh
23127066 - Nguyễn Bách Khoa
23127530 - Trương Quang Huy

[gemini-code-assist]

Code Review

This pull request introduces a "Show details" button for structured log lines in the log viewer, utilizing CSS hover effects and a dynamic CSS variable to maintain functionality during horizontal scrolling. Key feedback includes resolving a text selection conflict by adjusting the z-index of the hover-area pseudo-element, removing redundant positioning styles, improving accessibility with focus-visible states, and optimizing the scroll event listener to prevent unnecessary style recalculations.

[gemini-code-assist]

The "Show details" button is currently only revealed on mouse hover. For better accessibility, it should also be made visible when it receives keyboard focus (e.g., via Tab navigation).

Suggested change

	"&:hover .log-line-details-btn": {
	opacity: 1,
	pointerEvents: "auto",
	},
	"&:hover .log-line-details-btn, .log-line-details-btn:focus-visible": {
	opacity: 1,
	pointerEvents: "auto",
	},

[doanxem99]

I don't think this is necessary based on the issues raised, but I will do it if it's required.

[cursor]

Cursor Bugbot has reviewed your changes and found 2 potential issues.

^{Reviewed by Cursor Bugbot for commit f126e03f42958e00d792a709495ee883ec2d12da. Configure here.}

[doanxem99]

Hi @alanwguo @scottsun94 @Sparks0219 @edoakes, just checking back on this whenever you have a moment. I’ve verified that this fix addresses the issue described in #52347 and all CI tests are passing. I've also attached a video demo below to show the expected behavior. Thanks.

[edoakes]

Looks good. I've enabled pre-merge CI tests, if they pass the PR will merge. If not please ping me once you've fixed them

[doanxem99]

Looks good. I've enabled pre-merge CI tests, if they pass the PR will merge. If not please ping me once you've fixed them

Hi @edoakes, all CI checks are now passing after updating the branch. Could you re-enable auto-merge when you get a chance? Thanks for the review!