[Badge] Does not align properly when it targets a long text with overlap="circular"

[vignesh070801]

Steps to reproduce

Link to live example: (required) https://codesandbox.io/p/sandbox/gifted-river-35qwxk?file=%2Fsrc%2FDemo.tsx%3A4%2C1

Steps:

1. Enclose badge over a long text with overlap="circular"

Testing VERY LONG TEsT

Current behavior

Expected behavior

Badge to be at corner of the wrapped text

Context

No response

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.
Chrome

Search keywords: Badge long text

[siriwatknp]

A workaround is to override the badge slot CSS right: 0 using sx prop:

<Badge color="secondary" overlap="circular" badgeContent="5" slotProps={{ badge: { sx: { right: 0}}}}>
  Testing VERY LONG TEsT
</Badge>

[vignesh070801]

But then it works like overlap = "rectangular" which is the default behaviour , right?

[siriwatknp]

But then it works like overlap = "rectangular" which is the default behaviour , right?

Yes, from what I tested. It still works with overlap="rectangle"

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@vignesh070801 How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.