Auto width (instead of --toastify-toast-width)

[alexandernst]

Do you want to request a feature or report a bug? A new feature.

What is the current behavior? The width is hardcoded using --toastify-toast-width. This makes toasts with variable width look bad (eg if I set --toastify-toast-width to 200px toasts with short messages such as Loading finished look great, but long messanges such as There was an error while trying to do XYZ break on multiple lines and the toast looks bad).

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your CodeSandbox (https://codesandbox.io/s/new) example below:

N/A

What is the expected behavior? Can you make it so that the width is auto-calculated?

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

N/A

[alajmo]

Just add:

.Toastify__toast-container {
  width: fit-content;
}

[ben-propflo]

I'm still playing around with this so it might not be 100%. If you set the container width to auto and move the width to the toast body, you could override the size of the body per toast like this:

@import 'react-toastify/dist/ReactToastify.css';

:root {
  --toastify-toast-width: auto;
}

.Toastify__toast {
  width: 100vw;
}

@media screen(sm) {
  .Toastify__toast {
    width: 320px;
  }
}

  toast.success(
    <p>
      My really long message
    </p>,
    {
      className: 'sm:w-[500px]',
    },
  )

Note that I am using Tailwind classes here.

[menix1337]

I'd really need some stuff for this as well.

I'd love to have an "Auto-fit" on desktop, and just whatever it does now on mobile with the max width. This double line thing annoys me.

Edit

/* General toast container styling */
.Toastify__toast-container {
  display: flex;
  justify-content: center;
  width: 100% !important;
}

/* General toast styling */
.Toastify__toast {
  font-family: "Inter", sans-serif;
  width: fit-content !important;
}

Seems to have done the trick for me, personally.

[burgil]

.Toastify__toast-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    width: fit-content !important;
}

.Toastify__toast {
    width: fit-content !important;
    font-family: "Inter", sans-serif;
}

Works the best for me.