fix(studio): right-align FlatRow's value input in the flat inspector

[vanceingalls]

Summary

• FlatRow lays out label…gap…value across a justify-between row, but the shared CommitField input it wraps had no text-align, so its text hugged the LEFT edge of the value's own (often much wider) right-hand box — reading as left-aligned relative to the row, out of step with FlatSelectRow/FlatSlider, which already right-align.
• Added an optional align prop to CommitField (default "left", preserving the legacy panel's MetricField/DetailField layouts where label-then-value sits inline and left reads naturally) and passed align="right" from FlatRow.
• Left the Motion Timing row's Start/End/Duration cells alone — those stack label-above-value in a grid, a different pattern from the inline label…value row this fix targets.

Test plan

• Verified live in a running Studio dev instance: Size, Weight, Letter spacing, Line height, Color, Stroke, etc. all right-aligned
• New tests: FlatRow's input has text-right; legacy MetricField's input keeps text-left (pins CommitField's default so it doesn't drift for the panel that didn't ask for this)
• Full studio suite green; typecheck/oxlint/oxfmt clean

🤖 Generated with Claude Code

[vanceingalls]

• fix(studio): gate Layout and Style panel sections on the element having a rendered box #2534
• fix(studio): reserve a gutter for the promote-to-variable badge #2533
• fix(studio): make flat inspector's Stroke width free of style-name typing #2532
• fix(studio): right-align FlatRow's value input in the flat inspector #2528 👈 (View in Graphite)
• fix(studio): resync the shared SDK session after a Design-panel variable promote #2519
• fix(studio): give flat-inspector value fields a resting-state input affordance #2518
• fix(studio): show Layers full-height in the flat inspector, not split with Design #2497
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

[miga-heygen]

Review — #2528: right-align FlatRow value input

Clean. CommitField gets an align prop (default "left" for backward compat). FlatRow passes align="right" — correct for justify-between row layout. Classic panel regression guard test pins text-left. No logic changes.

Code: clean.

---

Review by Miga

[james-russo-rames-d-jusso]

Reviewed at b32f9a3e. Traced the align prop end-to-end (default vs opt-in) and verified the classic panel is byte-identical to pre-PR via the regression-guard test.

Blockers

(none)

Concerns

(none)

Nits

(none)

Green notes

🟢 align prop defaults preserve classic-panel behavior. CommitField's new align?: "left" | "right" prop defaults to "left" at the signature, so every existing consumer (MetricField, FontWeightField, etc. flowing into the classic PropertyPanel) keeps text-left without changing a line. Only FlatRow opts into align="right" — the change is one-directional and additive.

🟢 Regression guard for the classic panel is explicit. propertyPanelInputCoverage.test.tsx:137-142 asserts text-left present AND text-right absent in the classic path — a shift in CommitField's default would break this test loudly. That's exactly the shape needed to catch a future "just default to right for consistency" refactor that would silently re-flow every classic input.

🟢 Class conditional is safe. The template literal ${align === "right" ? "text-right" : "text-left"} is exhaustive across the union — TypeScript enforces align is only "left" | "right", so no unexpected class combos can leak through, and Tailwind sees both classes at build time (they're literal strings in the source).

🟢 text-right on a min-w-0 w-full numeric input truncates the LEADING characters when overflow. For FlatRow values that are numeric-with-unit ("72px", "1.5rem", "auto") this is the correct direction — the meaningful trailing unit stays visible. Non-blocker either way.

Verdict framing

Tiny, well-tested addition to the shared primitive. LGTM from my side. Base PR for the stack — merge gate applies to the full graphite chain, not just this PR.

— Review by Rames D Jusso