Toast is not centered when using `w-auto`

I'm trying to customize the toast to have a dynamic width using w-auto, so the toast only grows according to the text content. However, once I apply w-auto, the toast is no longer centered on the screen — even though it's supposed to be.

Current Behavior

• When I apply w-auto to the toast:

  • It breaks the centering.
  • It seems like translate-x-1/2 + left-1/2 is no longer effective.
  • When closing the toast, it animates incorrectly and sometimes doesn't disappear.

• I’ve also tried adding flex justify-center to the wrapper or using contentClassName, but it doesn't fix the alignment.

Expected Behavior

• Toast should remain horizontally centered regardless of whether it's using w-full, fixed width, or w-auto.
• Close animation should work properly and not shift the toast weirdly to the side.

Reproduction Steps

1. Set up <Toaster /> with toastOptions.className = 'w-auto'.
2. Trigger a toast with a long or short message.
3. Observe it is not centered and doesn’t animate out properly when closed.

Screenshot

Using

  const toastOptions: ToasterProps['toastOptions'] = {
    className: 'body-medium text-base whitespace-nowrap mx-auto w-auto',
    duration: 7000,
    classNames: {
      success:
        'bg-success-500 text-neutral-100 border border-success-100 group-[.toaster]:pointer-events-aut',
    },
  };

  const toaster = (
      <Toaster
        position="bottom-center"
        toastOptions={toastOptions}
      />