style(frontend): 4 RTL locales ship against 211 physical direction properties and 3 logical ones — Arabic, Farsi, Hebrew and Urdu render mirrored in text but not in layout #15216

Narrowed. This issue originally restated the hardcoded-colour debt already owned by #11515 —
whose 2026-07-10 audit is more thorough than mine (~1,785 hexes, ~4,158 px). Those findings have
been appended there instead. What remains here is the part no existing issue covers: the RTL
locales do not lay out correctly.

Problem

src/i18n/locales/ ships 11 locales, four of which are right-to-left: ar, fa, he, ur.
The stylesheets are written almost entirely in physical direction properties:

At roughly 70:1, selecting Arabic, Farsi, Hebrew or Urdu flips text direction while every margin,
padding and offset stays physically left or right. The layout mirrors in text and not in spacing:
labels, icons and controls end up on the wrong side of their own containers, and anything relying
on asymmetric padding reads as broken rather than translated.

Why it matters more than the raw count suggests

Four of eleven locales — over a third of the shipped languages — are affected. Unlike the colour
debt, this is visible to any user who switches language, on the first screen, without needing to
compare against anything.

It also makes further RTL translation work premature: translating into a layout that cannot
mirror spends effort on strings that will still display wrongly.

Direction

• Replace physical properties with logical equivalents (margin-inline-start / -end,
  padding-inline-start / -end, inset-inline-*, text-align: start / end). This is
  mechanical and independently verifiable.
• Audit the 11 files that already reference rtl — they may contain hand-rolled mirroring that
  should be removed once logical properties do the work, rather than layered on top.
• Add a lint rule rejecting new physical direction properties, or the ratio drifts back.
• Verify with a real RTL locale rather than a dir="rtl" toggle on English, so glyph shaping and
  spacing are exercised together.

Acceptance criteria

• Physical direction properties are replaced by logical ones across .vue styles.
• An RTL locale renders with mirrored spacing, not only mirrored text, on the main views.
• Existing hand-rolled rtl handling is reconciled with the logical properties rather than duplicated.
• A lint rule prevents reintroduction.

Scope note

autobot-slm-frontend has zero files referencing rtl and ships only en.json, so it is not
affected today — but it becomes affected the moment #14781 lands its remaining 10 locales. Worth
sequencing this before that, or the same defect ships twice.

References

src/i18n/locales/ (11 locales, 4 RTL). Related: #11515 (token debt, where this issue's original
colour findings now live), #14781 (SLM locales — the sequencing dependency), #12732 (i18n coverage).