Make composer controls direction-safe

Lay out composer fields and actions with logical CSS so the same control order and spacing work in left-to-right and right-to-left documents.

EasyResilient CSS

30 min0% acceptance

Description

Lay out composer fields and actions with logical CSS so the same control order and spacing work in left-to-right and right-to-left documents. Implement the learner-facing contract completely and satisfy every observable requirement without relying on hidden infrastructure.

Requirements

Keep challenge-shell within the viewport in both writing directions.
Allow composer-field to grow and shrink below its content width without overflow.
Use logical inline spacing rather than left-only or right-only margins for composer-action.
Mirror the challenge-item inline layout when direction is right to left.
Keep mixed-direction textarea content isolated and editable without reversing its characters.
Expose a visible focus indicator on challenge-control in both directions.

English

Input

Document direction is ltr

Expected output

Field and Send action fit on one responsive row

Explanation

Keep challenge-shell within the viewport in both writing directions.

Arabic

Input

Document direction is rtl

Expected output

The row mirrors with equivalent logical spacing

Explanation

Allow composer-field to grow and shrink below its content width without overflow.

Constraints

Edit CSS only and keep the supplied shared fixture class names
Support narrow and wide viewports without horizontal page overflow
Preserve visible keyboard focus and readable text in every tested mode

Hints

Hint 1

Start with the shell-readable-layout behavior and make its observable result deterministic.

Hint 2

Model flexible-composer-field independently before combining it with the remaining states.

Hint 3

Verify the boundary described by control-focus-visible without changing caller-owned input.

CSSRTLlogical properties