fix: Inconsistent button spacing in RTL mode

[Anshumancanrock]

Proposed changes (including videos or screenshots)

Fixed inconsistent button spacing in RTL (Right-to-Left) mode on the Account Preferences page.

In Arabic and other RTL languages, the Cancel and Save Changes buttons were appearing too close together or touching, while they had proper spacing in LTR mode. This happened because the ButtonGroup component uses physical CSS properties instead of logical ones.

The fix adds margin-inline props (mie='x4' and mis='x4') to the buttons, which automatically adapt to text direction and ensure consistent spacing in both LTR and RTL layouts.

Closes #38276

Steps to test or reproduce

1. Login to Rocket.Chat
2. Change language to Arabic
3. Navigate to Account → Preferences
4. Scroll to the bottom and observe the Cancel and Save Changes buttons
5. Verify proper spacing between buttons
6. Switch back to English and verify LTR layout still looks good

Before fix:

After fix:

Summary by CodeRabbit

• Bug Fixes

  • Fixed inconsistent button spacing in RTL mode on the Account Preferences page so Cancel and Save align consistently.

• Documentation

  • Added a release-notes entry documenting this patch.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[dionisio-bot]

Looks like this PR is not ready to merge, because of the following issues:

• This PR is missing the 'stat: QA assured' label
• This PR is missing the required milestone or project

Please fix the issues and try again

If you have any trouble, please check the PR guidelines

[changeset-bot]

🦋 Changeset detected

Latest commit: f7c44c4

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 40 packages

Name	Type
@rocket.chat/meteor	Patch
@rocket.chat/core-typings	Patch
@rocket.chat/rest-typings	Patch
@rocket.chat/uikit-playground	Patch
@rocket.chat/api-client	Patch
@rocket.chat/apps	Patch
@rocket.chat/core-services	Patch
@rocket.chat/cron	Patch
@rocket.chat/ddp-client	Patch
@rocket.chat/fuselage-ui-kit	Patch
@rocket.chat/gazzodown	Patch
@rocket.chat/http-router	Patch
@rocket.chat/livechat	Patch
@rocket.chat/model-typings	Patch
@rocket.chat/ui-avatar	Patch
@rocket.chat/ui-client	Patch
@rocket.chat/ui-contexts	Patch
@rocket.chat/ui-voip	Patch
@rocket.chat/web-ui-registration	Patch
@rocket.chat/account-service	Patch
@rocket.chat/authorization-service	Patch
@rocket.chat/ddp-streamer	Patch
@rocket.chat/omnichannel-transcript	Patch
@rocket.chat/presence-service	Patch
@rocket.chat/queue-worker	Patch
@rocket.chat/abac	Patch
@rocket.chat/federation-matrix	Patch
@rocket.chat/license	Patch
@rocket.chat/media-calls	Patch
@rocket.chat/omnichannel-services	Patch
@rocket.chat/pdf-worker	Patch
@rocket.chat/presence	Patch
rocketchat-services	Patch
@rocket.chat/models	Patch
@rocket.chat/network-broker	Patch
@rocket.chat/omni-core-ee	Patch
@rocket.chat/mock-providers	Patch
@rocket.chat/ui-video-conf	Patch
@rocket.chat/instance-status	Patch
@rocket.chat/omni-core	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[coderabbitai]

Walkthrough

Adds RTL spacing props to two buttons on the Account Preferences page and a new changeset documenting the RTL spacing fix. No API or exported signatures were changed.

Changes

Cohort / File(s)	Summary
Changeset Documentation ​.changeset/rtl-button-spacing-fix.md	Added a new changeset entry (patch) for @rocket.chat/meteor describing the RTL button spacing fix.
Account Preferences UI apps/meteor/client/views/account/preferences/AccountPreferencesPage.tsx	Added mie='x4' to the Cancel button and mis='x4' to the Save button to correct spacing in RTL mode.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Poem

🐇 I hopped the layout, twitching my nose,

Found buttons skewed where RTL flows.
A tiny nudge — mie and mis in place,
Now the page is tidy, balanced, and ace. 🎩✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'fix: Inconsistent button spacing in RTL mode' directly and clearly summarizes the main change: fixing button spacing issues in right-to-left language layouts.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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 and usage tips.}

[cubic-dev-ai]

No issues found across 2 files

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 70.75%. Comparing base (1e0b37f) to head (f7c44c4).
⚠️ Report is 27 commits behind head on develop.

Additional details and impacted files

@@             Coverage Diff             @@
##           develop   #38278      +/-   ##
===========================================
+ Coverage    70.71%   70.75%   +0.03%     
===========================================
  Files         3141     3142       +1     
  Lines       108799   108927     +128     
  Branches     19587    19779     +192     
===========================================
+ Hits         76942    77074     +132     
+ Misses       29857    29846      -11     
- Partials      2000     2007       +7     

Flag	Coverage Δ
e2e	60.33% <ø> (-0.01%)	⬇️
e2e-api	48.07% <ø> (-1.03%)	⬇️
unit	71.88% <ø> (+0.09%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[dougfabris]

Thanks for the contribution 🚀
Nice catch, but it feels like the proper fix would be consider the dir attribute in order to make the margins applied in fuselage's ButtonGroup

[Anshumancanrock]

Hi @dougfabris , Thanks for the feedback! That makes sense. I was already considering addressing this directly in Fuselage’s ButtonGroup and discussing the same with the team and waiting for thier confirmation. I’ll raise a PR for ButtonGroup fix in Fuselage soon once it’s ready.

[dougfabris]

Thank you so much 🚀 @Anshumancanrock
I'm closing this one because you're already fixing it in fuselage.