[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?