Fixes layout where title and close button overlap in RTL mode

[SarthakPandey2002]

Fixes layout where title and close button overlap in RTL mode
Uses logical CSS property for text direction

Summary by CodeRabbit

• Style
  • Adjusted modal header close button alignment and footer spacing for more consistent layout.
• Bug Fixes
  • Improved RTL support in the modal for better behavior in right-to-left languages.
• Chores
  • Added a changeset marking a patch release.

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

[changeset-bot]

🦋 Changeset detected

Latest commit: cca00ec

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

This PR includes changesets to release 1 package

Name	Type
flowbite-react	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

[vercel]

@Sandeep17262shra is attempting to deploy a commit to the Themesberg Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

📝 Walkthrough

Walkthrough

Switched modal header close button utility from ml-auto to ms-auto and replaced footer spacing space-x-2 with gap-2; added a changeset indicating a patch release mentioning improved RTL support.

Changes

Cohort / File(s)	Summary
Modal theme updates packages/ui/src/components/Modal/theme.ts	Changed header close align utility from ml-auto to ms-auto; changed footer spacing from space-x-2 to gap-2.
Release changeset .changeset/smooth-points-smile.md	Added changeset noting a patch release for flowbite-react and improved RTL support in the modal.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested labels

:bug: bug

Suggested reviewers

• SutuSebastian
• rluders

Poem

🐰 A little hop, a tiny tweak,
From left to start the close will seek,
Gaps now breathe where x once lay,
RTL smiles along the way — hooray! 🥕

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main fix: addressing the layout overlap issue between modal title and close button in RTL mode, which matches the code changes using RTL-aware CSS properties (ms-auto, gap-2).
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

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

---

📜 Recent review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 70b6223 and cca00ec.

📒 Files selected for processing (2)

• .changeset/smooth-points-smile.md
• packages/ui/src/components/Modal/theme.ts

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: 🧰 Build

🔇 Additional comments (3)

.changeset/smooth-points-smile.md (1)

1-5: LGTM! Changeset properly documents the RTL improvement.

The changeset format is correct, and the patch-level version bump is appropriate for this bug fix. The description accurately reflects the Modal component improvements.

packages/ui/src/components/Modal/theme.ts (2)

48-48: Excellent fix for RTL support on the close button.

Switching from ml-auto (physical margin-left) to ms-auto (logical margin-inline-start) correctly positions the close button on the appropriate side in both LTR and RTL layouts, resolving the title overlap issue.

Note regarding the past review comment: The broader refactoring across other components (Alert, Timeline, ListGroup, etc.) mentioned in the previous review is a valid improvement but is outside the scope of this focused Modal fix. That work could be tackled in a follow-up PR.

---

53-53: Good improvement to use gap-2 for footer spacing.

Replacing space-x-2 with gap-2 not only fixes RTL layout issues but is also semantically cleaner. The gap property is direction-agnostic and works consistently across both LTR and RTL modes without relying on physical directional margins.

---

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.}

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 251fcf4 and 70b6223.

📒 Files selected for processing (1)

• packages/ui/src/components/Modal/theme.ts (1 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: 🧰 Build

🔇 Additional comments (1)

packages/ui/src/components/Modal/theme.ts (1)

48-48: Excellent fix for RTL support!

The change from ml-auto to ms-auto correctly uses Tailwind's logical property, ensuring the close button positions properly in both LTR and RTL text directions. This resolves the overlap issue in RTL mode while maintaining correct behavior in LTR mode.

[SarthakPandey2002]

@SutuSebastian can you please review this PR for the issue
#1444

[SutuSebastian]

Looking good, but let's cover all the cases here as well, and replace space-x-2 in modalTheme.footer.base with gap-2.

Also please run bun changeset, select flowbite-react package and bump the version as patch

[SarthakPandey2002]

@SutuSebastian required changes done please review