[Bug]: Code Overlay Highlight Not Displayed Correctly in RTL Mode

[mrbadri]

Summary

When viewing code examples in RTL mode (e.g., Arabic, Hebrew, Persian) on react.dev, the code overlay highlight does not appear correctly. Normally, when hovering over the code section, the corresponding preview area should be highlighted, but in RTL mode, the overlay is either misaligned or does not appear at all.

Page

https://fa.react.dev/

Details

🎯 Steps to Reproduce

1. Open fa.react.dev or ar.react.dev.
2. Navigate to any code example.
3. Hover over the code section.
4. Notice that the overlay highlight does not appear correctly over the preview.

✅ Expected Behavior

• Hovering over the code section should highlight the corresponding preview area correctly, just as it does in LTR mode.

❌ Actual Behavior

• The overlay highlight is missing or misaligned in RTL mode.

🎥 Screenshots / Videos

⚠️ Bug in RTL mode

Screen.Recording.2025-03-04.at.1.30.14.PM.mov

[mrbadri]

We are actively trying to revive the fa.react.dev repository in this issue.
Join us and show your support: #7786