fix: height calculation for updated toasts

[xxmichas]

I am 95% sure this commit won't break anything, but someone should conduct additional testing.

This PR fixes height calculations for updated toasts.

Currently updateHeights() sets height: auto and gets the new height using getBoundingClientRect(). Unfortunately, this takes scale into account, making the toast smaller than it should be. This is also an issue with the original react sonner.

You can see it (even on https://sonner.emilkowal.ski/) by clicking the "Promise" button and following it with a couple of presses of the "Default" button (Note: the Toaster needs to be collapsed).

I fixed it by taking scale into account during calculations. However, during testing, I learned that getBoundingClientRect() is also affected by transitions (e.g., scale transitioning from 0.90 to 0.85), so it's not reliable either. So I added another variable offsetHeight. Luckily, element.offsetHeight isn't affected by scale, but only returns integers, so it can be off by up to 1px.

The final code uses both calculations to provide the best possible experience.

You can test it for yourself by putting the following console.log in updateHeights():

console.log(`scale: ${scale}\nscaledRectHeight: ${scaledRectHeight}\noffsetHeight: ${offsetHeight}\nchosen height: ${finalHeight}`);

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 65cb04532cd806fe64c52439a4478baf53684c9b

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

| Name | Type | | ------------- | ----- | | svelte-sonner | Patch |

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
svelte-sonner	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 1, 2024 3:12pm