UI: Fix controls expander and select chevron overlap in RTL

[TheSeydiCharyyev]

Closes #35481

What I did

Several Controls/Manager UI elements used physical CSS properties, so under dir="rtl" their icons overlapped the adjacent text:

• Args-table section expander (SectionRow) used margin-left/margin-right, so the expand chevron stayed on the heading's left and overlapped the category label in RTL. Switched to margin-inline-start/margin-inline-end.
• Select control (Form/Select) used padding: 6px 30px 6px 10px to reserve room for its chevron. Switched to padding-inline-*. The fallback chevron is a background image (background-position: calc(100% - 12px)), which has no logical-property equivalent, so its position is mirrored to the inline-start under RTL via &:dir(rtl). The modern appearance: base-select path already lays the chevron out with flexbox and flips automatically, so it needs no change (and the physical→logical padding is overridden there).

Added RTL stories (SectionRow → Section Rtl, Form/Select → Rtl) so the RTL layout is covered by Chromatic.

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

• stories

Manual testing

1. Run the internal Storybook (cd code && yarn storybook:ui) or a sandbox.
2. Controls category expander: open addons/docs → blocks → components → ArgsTable → SectionRow → Section Rtl. The expand chevron sits on the inline-start (right) edge of the heading and no longer overlaps the label. Compare with the LTR Section story — it is a clean mirror.
3. Select control: open components → Form → Select → Rtl. The dropdown chevron sits on the inline-end (left) side, clear of the value text.
4. Optionally, in any story, run document.documentElement.dir = 'rtl' in the preview DevTools console to flip the whole UI and confirm the args table and select controls lay out correctly.

Documentation

• Add or update documentation reflecting your changes

No documentation changes needed — this is a CSS-only layout fix.

Checklist for Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts

• Declare whether manual QA will be needed for this PR during the next release, through qa:needed or qa:skip

• Make sure this PR contains one of the labels below:

  Available labels

  • bug: Internal changes that fixes incorrect behavior.
  • maintenance: User-facing maintenance tasks.
  • dependencies: Upgrading (sometimes downgrading) dependencies.
  • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
  • cleanup: Minor cleanup style change. Will not show up in release changelog.
  • documentation: Documentation only changes. Will not show up in release changelog.
  • feature request: Introducing a new feature.
  • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
  • other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook publish.yml --field pr=<PR_NUMBER>

Summary by CodeRabbit

• Bug Fixes

  • Improved right-to-left (RTL) layout support for expandable sections and select controls.
  • Corrected spacing and chevron positioning in RTL interfaces.
  • Preserved consistent padding and alignment across text directions.

• Tests

  • Added RTL examples for documentation sections and select controls to verify visual behavior.

[github-actions]

	Fails
🚫	PR is not labeled with one of: ["qa:needed","qa:skip","qa:success"]

Generated by 🚫 dangerJS against ebdc6bc

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 33fd49b5-609a-415e-b6cc-4837778b743b

📥 Commits

Reviewing files that changed from the base of the PR and between 5073688 and ebdc6bc.

📒 Files selected for processing (4)

• code/addons/docs/src/blocks/components/ArgsTable/SectionRow.stories.tsx
• code/addons/docs/src/blocks/components/ArgsTable/SectionRow.tsx
• code/core/src/components/components/Form/Select.stories.tsx
• code/core/src/components/components/Form/Select.tsx

---

📝 Walkthrough

Walkthrough

The changes add RTL-aware spacing for SectionRow expander icons and BaseSelect padding and chevron positioning. New Storybook stories exercise RTL rendering for both components.

Changes

RTL support

Layer / File(s)	Summary
RTL SectionRow spacing code/addons/docs/src/blocks/components/ArgsTable/SectionRow.tsx, code/addons/docs/src/blocks/components/ArgsTable/SectionRow.stories.tsx	Expander icons use logical inline margins, and the stories support direction-aware rendering with a new RTL example.
RTL Select styling code/core/src/components/components/Form/Select.tsx, code/core/src/components/components/Form/Select.stories.tsx	Select padding uses logical properties, the fallback chevron is mirrored in RTL, and a dedicated RTL story is added.

Estimated code review effort: 2 (Simple) | ~10 minutes

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint install failed. For unrecoverable errors, disable the tool in CodeRabbit configuration.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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