Toast height calculation bug

[danqing]

trafficstars

Example: https://codesandbox.io/s/react-hot-toast-responsive-position-forked-64f33?file=/src/App.js

When you use the toast ID to change one toast to another (e.g. from loading to success), sometimes the height of the toast is off. I think it's because it's not updating the height of the toast container when the content changed.

(As always, thank you for this great lib!)

[timolins]

Great find, this is indeed a bug. The height of each toast is currently only measured on mount. The fix requires a bit of a refactoring, I will have a closer look when I get to it.

[swiftyjam]

Hey! Hows the progress on this @timolins ? ❤️

[alexfertel]

Not sure if this is appropriate, but it would be very nice if this got fixed! Thanks for an awesome lib!

[valdrin-t]

Is there a way to force recalculation of the heights? I'm getting the same issue with toast.custom where the custom toaster can expand/shrink. Edit: Or perhaps change the custom toaster parent style?

Edit2: I managed to find a fix, by overwriting the className of the container and the children:

.wrapper {
  display: flex;
  flex-direction: column;
}
.wrapper > div {
  position: relative !important;
  transform: translateY(0) !important;
}

<Toaster containerClassName={style.wrapper} />

[timolins]

@valdrin-t Not in the current version. This should be fixed with #207. Trying to get this out soon.

[valdrin-t]

Cool! I didn't notice the PR was still open, I thought it was merged.

[liho00]

.wrapper {
  display: flex;
  flex-direction: column;
}
.wrapper > div {
  position: relative !important;
  transform: translateY(0) !important;
}

this method working, however dismissing the toast will be delay, have to use toast.remove to remove the toast, thus, this will also causing the animation of remove toast gone...

but for my case should be fine with this method. thanks!