Display DApp in fullscreen when user scrolls up

[iurimatias]

Problem

The status browser takes a lot of screen real estate which distracts from the dapp itself.

Implementation

The approach taken in other mobile browsers is to hide the toolbars when the user scrolls down, and to show the toolbar again when scrolling up. Below is how it looks like in firefox mobile.

[andremedeiros]

@hesterbruikman @errorists do we understand how iOS/Android decide to hide the top bar? Sounds like this could be a huge improvement in terms of screen usage (particularly for lower end phones.)

[errorists]

@andremedeiros we just need for it to happen, hiding the toolbar was always there as part of the design for quite a long time now Figma

If we want to hide the address bar along with it, sure we could discuss that. that's like 56 pixels of additional space, 52 for the toolbar.

[hesterbruikman]

@hesterbruikman @errorists do we understand how iOS/Android decide to hide the top bar?

To add, here are 2 related issues. If we solve them, it'll probably make it easier to fix this. I don't think we control the topbar well atm.

• Include a safeArea in the topbar: Topbar #8981
• Search bar hide on scroll (address bar would than act as the Search bar component: Search bar animation behavior #7697

The browser address bar is currently out of scope for #8981 I'm not sure why that is though. Probably @rachelhamlin or @flexsurfer can answer that.

[errorists]

Search bar hide on scroll (address bar would than act as the Search bar component)

to only add to that so it's not confused, it's a different behaviour we want for those. Browser's address bar is a predefined Y axis animation that happens when a certain scroll velocity value has been achieved on scroll.
For the Search Bar, it's placed at a -1 position in the list, kinda like a basement. We don't animate it.

[flexsurfer]

#12394