Bug: Hover highlight in interactive code example overlaps the preview content #37933

Description

I noticed a potential UI issue on the React documentation homepage: https://react.dev/

Steps to reproduce

1. Open https://react.dev/.
2. Scroll to the interactive code example showing the Video component.
3. Hover over a line in the code editor, such as {video.description}.
4. Observe the corresponding highlighted area in the preview on the right.

Expected behavior

The hover highlight should remain within the intended area and should not obscure the preview's title, description, or other content.

Actual behavior

The highlighted area appears to extend across the right-side preview and overlap its content, making the preview visually cluttered.

Environment

• Browser: Microsoft Edge
• Operating system: Windows
• Page: https://react.dev/

Screenshot: Attached for reference.