Move resize handle to lower left

[jason00111]

Problem:

In LTR locales, the resize handle sits in the lower right of the popup. The right edge of the popup is fixed below the extension icon, so that edge can't move. When the handle is dragged, the popup grows from the left instead, which is disorienting.

Solution:

Move the resize handle to the lower left, so it's on the edge that actually moves.

Implementation:

The resize handle is a property of the textarea, and it is placed in the lower left automatically when the element's direction is RTL. We don't want to flip the direction on the textarea itself, since user-entered text should display in its natural reading direction.

So this PR:

• Moves the resize handle from the textarea to the body.
• Sets direction: rtl on the body (so the handle ends up on the left).
• Sets direction: __MSG_@@bidi_dir__ on the body's children, so content still respects the user's locale. __MSG_@@bidi_dir__ is copied from CommonCss.
• Updates resizeMutationObserver to observe the body instead of the textarea, since the body is now what resizes.

[rugk]

Hi @jason00111,
first of all, thanks for your first contribution to this project! 🎉 👍 🏅
I hope you'll like this project and enjoy hacking on it… 😃

This looks like a good contribution. Do you have a screenshot (or even better screencast) to see that it works as intended (with RTL languages and with LTR also still works)?

[rugk]

Okay @jason00111 I tested this and it seems to work as you describe:

The button is on the lower left… however, as you can see, by default, the extension button is also placed on the left of the screen. Though well… it would kinda be consistent with LTR languages.

[rugk]

So it s not fully consistent. Also for me (in LTR) languages, it seems also quite broken now, Firefox seems to not allow resizing "to the left" and it either ends up on the right part or just does not resize:

Bildschirmaufzeichnung.vom.2026-06-19.14-36-19.mp4

Maybe this is just no technically possible.