Possibility to overwrite default toast width

[kasleet]

Describe the bug

First of all, thanks for the nice work!

I think there is currently no built-in option to increase the width of the toast, which I really need for wider desktop screens. I tried it by setting a class and then overwriting the "--width" property, which does make the toast wider but now the offsets aren't correct anymore.

Reproduction

-

Logs

-

System Info

-

Severity

annoyance

[wobsoriano]

Hey, let me know if this thread helps you.

[kasleet]

Hey, thanks for the link but unfortunately that didn't work. I also tried various CSS styles but at least for me, that unfortunately didn't change the width at all.

[shub86]

We can overwrite the default toast width using this css selector I hope it would be working.

[aria-label="Notifications alt+T"] ol {
  --width: 450px !important;
  height: 250px;
  right: 100px;
}

[ftwang]

Similar to what @shub86 suggested, if you are using tailwind css, you can override the css variable --width when initializing Toaster.

<Toaster
  className="![--width:450px]"
/>

This also allows you to set the width according to screen size, ie leave the width at the default 356px, or 450px if the screen width is greater than 'md' breakpoint at 768px.

<Toaster
  className="md:![--width:450px]"
/>

[gottlike]

Just to add to this, for me this only worked with "class", not "className", e.g.:

<Toaster
  position="top-center"
  expand={false}
  richColors={false}
  duration={4000}
  class="![--width:340px] xl:![--width:660px]"
  toastOptions={{
    unstyled: true,
    classes: {
      toast:
        'flex items-center justify-center w-full px-5 py-3 rounded-lg shadow-lg bg-white dark:bg-zinc-800 border border-zinc-300 dark:border-zinc-500 text-zinc-800 dark:text-zinc-200',
      title: 'font-medium text-sm ml-2'
    }
  }}
/>