Send/Receive buttons not visible on iPhone PWA

[design-rrr]

[DSanich]

@design-rrr I can check and take on this if you don't mind

[DSanich]

@design-rrr I tested it on my iPhone 13 and the problem is indeed there. I'll be looking for a solution.

[DSanich]

@design-rrr @snake-eaterr I'm happy to share with you my solution that fixes this issue for PWA.

#563

[design-rrr]

This is great, we will test and see if there's any conflict before merging

[snake-eaterr]

Generally in ionic, an ion-footer''s last ion-toolbar child will automatically get padding-bottom: var(--ion-safe-are-bottom, 0px); (conversely ion-header's first ion-toolbar will automatically get padding-top: var(--ion-safe-are-top, 0px)). --ion-safe-area-(dir) is sourced by ionic.

In src/Pages/Home.tsx we use IonFooter but without IonToolbar inside of it, so we need to add padding-bottom: var(--ion-safe-are-bottom, 0px); to our custom toolbar div (.toolbar classname). This should fix the issue. However after doing this you will notice the iphone virtual home bar will still overlap with the footer. That's a known issue about edgeToEdge that we haven't fixed yet.

Home page as it is now on iphone 13 pro max PWA:

home page with .toolbar class having padding-bottom: var(--ion-safe-are-bottom, 0px):

Also your changes in variables.css are problematic because they affect all ion-footers and ion-toolbars even though an ion-footer could have multiple ion-toolbars and that would create vertical spaces between such stacked toolbars

[snake-eaterr]

The edge to edge is fixed on android through this plugin but this plugin only works for android. Ios issue still stands

[snake-eaterr]

Setting padding-bottom on ion-footer globally appears to solve the issue without missing up android or other stuff

[snake-eaterr]

@DSanich revert your changes, globally set ion-footer to have padding-bottom: var(--ion-safe-area-bottom, 0px) and the same for .toolbar class on home page and that should fix everything

[DSanich]

@DSanich revert your changes, globally set ion-footer to have padding-bottom: var(--ion-safe-area-bottom, 0px) and the same for .toolbar class on home page and that should fix everything

@snake-eaterr Hello! Ok, I will do it. Thanks for review!

[DSanich]

@snake-eaterr Yes, you're absolutely right. I've made all the necessary edits here 8c8afbb