multi-line promise toasts change height on hover when using expand

Question

multi-line promise toasts change height on hover when using expand

Closed this issue 5 months ago · 17 comments

<Toaster expand={true} />

toast.promise(Promise.resolve(), { success: 'This my very very very very very very very very very very very very very very very very very very very very long and descriptive promise toast!!!' })

when hovering over these toasts, they will change height as their top paddings will disappear, causing weird layout shifts, it looks very ugly

Answer 1 · 2023-11-15T13:25:40.000Z

+1 on this for me. Will be awesome to get this one fixed since this is such a beautiful modal implementation.

Answer 2 · 2023-11-15T16:58:18.000Z

WIll look into it this week

Answer 3 · 2023-11-26T22:01:53.000Z

Hey y'all, can any of you provide a demo of this? I can't replicate / notice the shift

Answer 4 · 2023-11-26T23:44:59.000Z

@wobsoriano hey sorry, this error report is inaccurate, the reproduction steps are actually as follows:

<Toaster expand={true} />

toast.promise(Promise.resolve(), { success: 'This my very very very very very very very very very very very very very very very very very very very very long and descriptive promise toast!!!' })

it happens only with promise toasts, not normal toasts

Answer 5 · 2023-11-27T01:15:01.000Z

Are you still getting it with the latest version @ThaUnknown?

Answer 6 · 2023-11-27T08:14:13.000Z

@wobsoriano seem like I'm still getting this issue on 0.3.6 sadly when there's only one toast item:

Screen.Recording.2023-11-27.at.10.08.04.mov

Answer 7 · 2023-12-29T19:56:26.000Z

I'm not able to reproduce with the latest version, is anyone able to reproduce or should this be closed?

Answer 8 · 2023-12-30T00:37:50.000Z

I can still reproduce this, I'll make some minimal test case later

Answer 9 · 2023-12-30T01:01:41.000Z

repro.zip

this issue happens when the error/success has more lines than the pending text, I've attached a stupidly simple reproduction case, which runs on body click

Answer 10 · 2024-01-05T06:37:40.000Z

@ThaUnknown can you use https://stackblitz.com or https://codesandbox.io/ to create a repro?

Answer 11 · 2024-01-05T08:41:18.000Z

you can simply paste the files into stack blitz yourself

Answer 12 · 2024-01-10T04:03:05.000Z

I can still repro this, too

https://stackblitz.com/edit/vitejs-vite-gtdpxr?file=src%2FApp.svelte

Answer 13 · 2024-01-10T14:51:43.000Z

Thanks for the repro @jakob-kruse, will look into this!

Answer 14 · 2024-01-17T13:15:49.000Z

I tried to fix this myself by failed. I think i understand the reason though.

When Toast.svelte mounts it calculates the initialHeight. Code

This will be the height of the loading message, which would be too small for the success/error message.

The height should be updated every time the type / content of the toast changes.

Hope this helps, @huntabyte!

Answer 15 · 2024-01-17T16:08:14.000Z

This definitely helps!

Answer 16 · 2024-02-25T09:38:14.000Z

This is a very beautiful tool and certainly elevates any Svelte app's experience! 10/10 except for this one small issue, is there a temporary fix that we can use?

Answer 17 · 2024-02-27T23:26:23.000Z

@jakob-kruse thanks for the repro! It's now fixed in 0.3.19

https://stackblitz.com/edit/vitejs-vite-d7j7sy?file=package.json