fix: fixes the overflow when a toast is displayed on mobile

[BayBreezy]

On mobile, rendering the toast component would cause an overflow on the x axis.
After inspecting the DOM, I realised that adding a width of 0px and display of inline-block fixed the issue.

[zernonia]

I dont think we should set as 0px (based on this https://github.com/twbs/bootstrap/blob/9c1c3d4d048eeb8b685e5442c21489f101c4ad05/scss/mixins/_visually-hidden.scss)

[zernonia]

maybe there's something we're missing on mobile.. causing it to renders differently

[zernonia]

I just check on mobile.. seems like text-slate12 is not computing the desired css. It should have nothing to do with visuallyHidden tho.. adding your propose solution doesn't work too.

[BayBreezy]

Hey @zernonia , the element in question is actually the span tag that renders the text from the toast

[zernonia]

Icic.. could you screenshot what is the UI looks like currently with that element pushing the UI?

[BayBreezy]

When I add the proposed styles to that element in the DOM, the toast gets rendered properly

But without the styles, I get this overflow

[Blinks44]

Hm, even mobile version on radix-vue.com looks like this after showing a toast.

[zernonia]

thanks guys!!! I realized my stupid mistake lol...

it should be 1px, and not number 1 when we apply styling. @BayBreezy instead of setting 0px, can you help with fixing the height, width and margin by adding the word px? 😁

[BayBreezy]

Sure thing. And leave the display as inline-block correct? From what I remember about css, width and won't have an effect on items that are displayed inline

[zernonia]

LGTM!! I think leaving inline-block should be fine 😁!

Thanks @BayBreezy !