fix: use inline-flex instead of flex in Badge base class

[zhengshui]

Summary

Fixed issue #1614: Badge component was using flex as the base display class, which caused it to expand to full width when placed inside a normal div. Changed to inline-flex to maintain proper inline behavior.

Changes

• Changed flex to inline-flex in the Badge theme base class

Verification

• Built the project successfully
• All existing Badge tests pass

Related Issue

Closes #1614

Summary by CodeRabbit

• Style
  • Updated Badge component layout behavior to improve rendering and spacing in various contexts.

[changeset-bot]

⚠️ No Changeset found

Latest commit: df2d3d2

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

[vercel]

@zhengshui is attempting to deploy a commit to the Bergside Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 75adf8a9-af12-4065-9d01-e6e31abbe7fe

📥 Commits

Reviewing files that changed from the base of the PR and between 0f526aa and df2d3d2.

📒 Files selected for processing (1)

• packages/ui/src/components/Badge/theme.ts

---

📝 Walkthrough

Walkthrough

The Badge component's root element display property is updated from flex to inline-flex, allowing badges to render as inline components within normal document flow instead of expanding to full width.

Changes

Cohort / File(s)	Summary
Badge Theme Configuration packages/ui/src/components/Badge/theme.ts	Root display property changed from flex to inline-flex to enable inline rendering behavior for badges.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Poem

🐰 A badge so small, now stands just right,
No more it stretches left to right!
With inline-flex, it takes its place,
A dainty token in the text's embrace. ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 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 change: replacing 'flex' with 'inline-flex' in the Badge base class, which is the core objective of this PR.
Linked Issues check	✅ Passed	The PR successfully addresses issue #1614 by changing the Badge base display class from 'flex' to 'inline-flex' as requested, making badges render inline by default.
Out of Scope Changes check	✅ Passed	The PR contains only the necessary change to the Badge theme base class, directly addressing the linked issue without introducing unrelated modifications.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

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

📝 Coding Plan

• Generate coding plan for human review comments

---

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

Tip

You can get early access to new features in CodeRabbit.

Enable the early_access setting to enable early access features such as new models, tools, and more.