how can I create this kind of modal to make it slide up from bottom so it covers only the bottom side of the page content?
I wanted to implement it with “Open page in modal” logic, but seems like it will always cover the whole content of the initial page.
There is an Open Page in Bottom Sheet component thst does that in marketplace
The Action Sheet flow function from the marketplace might work for you as well. I don’t think it allows the styling needed to do exactly what you have shown (i.e. icons, font color), but it has the general capabilities you are looking for.