Added Portal to ErrorMessage to stack it on top of the view

[andrefernandes-95]

📝 Summary

Wrapped ErrorMessage within a Portal so that it correctly positions it above all the other elements.

Right now, it seems every View component has a z-index: 0, which makes it very tricky to work with the children z-index, causing the issue described here #7524

I think using a Portal could be the right idea here.

Update:

• Replaced Portal implementation with <Layout.Center /> as suggested below.

📝 Related Issues

#7524

🚀 Demos (Updated after @mozzius suggestion)

Scroll.test.2.mp4

[mozzius]

Ah thanks for trying to fix it - however, we don't want stack it on top of everything, it just needs to fit in the center column, like it used to (and still does on native). I think wrapping it in <Layout.Center> will do the trick?

[andrefernandes-95]

Ah thanks for trying to fix it - however, we don't want stack it on top of everything, it just needs to fit in the center column, like it used to (and still does on native). I think wrapping it in <Layout.Center> will do the trick?

Thanks for the tip, I've gone back and followed the suggestion, you're spot on, it looks much better and it's within the layout like you mentioned. Took some screenshots from several ErrorMessage instances to check:

Notifications

Lists

Profile

I'll commit the change and take new evidences. Thanks a lot!

[mozzius]

Awesome, thank you so much 🙏 looks great!

[mozzius]

Beautiful