fix(desktop): keep annotation comment direction independent of host page

[abdelrhmanehab10]

What Changed

The preview annotation overlay now forces its own dir="ltr" on the overlay host, so the toolbar, editor, and element labels keep a stable layout regardless of the inspected page's direction. The comment textarea uses dir="auto", so Arabic, Hebrew, Persian, and other RTL comments start from the right and keep readable bidi ordering, while LTR comments are unchanged.

Fixes #4644

Why

The annotation <textarea> had no dir attribute and the overlay inherited direction from the inspected document. On an LTR page an Arabic comment was anchored to the left and ordered incorrectly. On an RTL page the whole annotation chrome mirrored: tool order reversed, the Attach button moved, and element labels got pushed off the right edge of the viewport.

Isolating the overlay from the host document and letting the comment field infer direction from its content is the smallest change that fixes both.

UI Changes

Arabic comment on an LTR host page. Before: text is anchored to the left of the field.

After: the comment starts from the right, toolbar unchanged.

RTL host page. Before: the overlay mirrors along with the page, and the element label is pushed off screen.

After: the overlay keeps its LTR layout while the page stays RTL.

Checklist

• This PR is small and focused
• I explained what changed and why
• I included before/after screenshots for any UI changes
• I included a video for animation/interaction changes (not applicable)

Reviewed and verified with Claude Fable 5.1 in Claude Code.

🤖 Generated with Claude Code

[macroscopeapp]

Approvability

Verdict: Approved at 0967483

Macroscope's review found this PR approvable — This is a focused three-line fix that isolates the desktop annotation overlay's layout direction from the inspected page while allowing comment text to follow its own content direction. Its runtime impact is limited to annotation UI presentation, with no schema, infrastructure, security, billing, or static-analysis changes.

Notes:

• Diff unchanged. Approvability was decided on eligibility alone.

^{You can add or adjust custom eligibility rules. Learn more.}

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Configuration used: Path: .coderabbit.config.ts
• Review profile: CHILL
• Plan: Advanced
• Run ID: 3e760caf-0c94-4b42-a3af-fe429787c2f2

---

📥 Commits

Reviewing files that changed from the base of the PR and between 0967483 and f418b92.

---

📒 Files selected for processing (1)

• apps/desktop/src/preview/PickPreload.ts

---

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 9 remain after this review.

---

---

📝 Walkthrough

Walkthrough

The preview annotation overlay now keeps its host and root left-to-right. The comment textarea selects its text direction from its content.

Changes

Annotation direction handling

Layer / File(s)	Summary
Apply annotation direction attributes apps/desktop/src/preview/PickPreload.ts	The overlay host and root use dir="ltr". The comment textarea uses dir="auto".

Priority: ⬇️ Low

Estimated code review effort: 1 (Trivial) | ~5 minutes

Change: Bug fix · Severity of issue fixed: Low

Suggested reviewers: t3dotgg

---

Merge Risk: ⚪ Minimal · up to f418b

The annotation controls keep a stable layout on RTL pages, while comment text follows its content direction. No actionable merge-blocking risk was found; the change is ready for normal checks.

Architecture Summary

Architecture risk: 🔵 Low · up to f418b

The change affects 1 system.

Changed systems: apps/desktop

Architecture concerns
No architecture-level concerns identified.

Review details

Systems and components

• observed — apps/desktop (service) was modified; 1 changed file maps to changed impact.

Before / after behavior

• observed — Modified behavior in apps/desktop/src/preview/PickPreload.ts: The annotation host now explicitly sets its direction to left-to-right.
• observed — Modified behavior in apps/desktop/src/preview/PickPreload.ts: The annotation root now explicitly sets its direction to left-to-right.
• observed — Modified behavior in apps/desktop/src/preview/PickPreload.ts: The comment textarea now uses automatic text direction.

---

Pre-merge checks | 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check		The title clearly and concisely identifies the desktop annotation direction fix. It matches the main change in the pull request.
Description check		The description explains the problem, the implementation, the linked issue, and the UI impact. It includes before-and-after screenshots and states that the change was reviewed and verified. It uses di…
Linked Issues check		Issue #4644 requires content-based direction for the annotation comment and a stable LTR annotation layout. The PR sets dir="auto" on the comment textarea. It sets dir="ltr" on both the overlay ho…
Out of Scope Changes check		The whole-PR diff changes only apps/desktop/src/preview/PickPreload.ts. All three additions configure direction for the annotation overlay or its comment textarea. No unrelated change is present.

---

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create a new PR

---

---

_{Comment @coderabbitai help to get the list of available commands.}

Dismissing prior approval to re-evaluate 0967483