Fix fullscreen dialog for small devices

[emibcn]

I have been reported about a bug in some small devices, where the dialog' Close button falls out of the view. The user needs to scroll down a bit to see the button. Looks like it's when the app is viewed directly from browser, while it is showing the navigation bar.

Initial view (before scrolling):

Final view (after scrolling down):

Fle: https://github.com/emibcn/covid/blob/master/app/src/Widget/Actions.jsx#L53

Some extra info: https://stackoverflow.com/questions/37395561/how-to-hide-a-mobile-browsers-address-bar
Possible solution: https://chanind.github.io/javascript/2019/09/28/avoid-100vh-on-mobile-web.html

[ashish979]

@emibcn I can fix this one too if you want?

[emibcn]

@ashish979 Its yours!

[ashish979]

Hi @emibcn
I have raised PR for this fix #27
I verified the fix on my android device (chrome browser) but please check once on other mobile browser too and let me know if the fix is ok.

[ashish979]

Hi @emibcn
Sorry for the delay, been busy with some important tasks.

I tried replicating the issue on firefox browser on an android device but could not successfully replicate it. Can you please help me with the device version and browser version so that I can check if the issue still exists?
Below is the screenshot from my device:

Also I have raise PR #31 as per your suggestion adding paperFullScreen. Please test if this fixes the issue.

[emibcn]

Hi @ashish979 ,

Note: You don't need to remove and recreate a PR: just push new commits to the branch you were working on and them will be visible in the PR while it is open.

Also I have raise PR #31 as per your suggestion adding paperFullScreen. Please test if this fixes the issue.

About the fix you provided in #31 : paperFullScreen property is not intended to be used like that (did you read the docs provided in the comment #27 (comment) ?).

[emibcn]

I tried replicating the issue on firefox browser on an android device but could not successfully replicate it. Can you please help me with the device version and browser version so that I can check if the issue still exists?

I use DuckDuckGo browser app, which I thought it was a fork of Firefox, but now I see it might not be like that...

[ashish979]

About the fix you provided in #31 : paperFullScreen property is not intended to be used like that (did you read the docs provided in the comment #27 (comment) ?).

Hi @emibcn
I did read the docs and used the property as mentioned. paperFullScreen is adding some styles when the fullScreen property is true.

According to the docs:

And in the actual implementation:

I can see these styles applied in my browser:

Can't say what I am missing here. Please suggest.

[emibcn]

Sorry about the delay.

In the current implementation (without your commit), same classes and CSS rules are applied:

I think this is a problem that needs a hacky solution, probably better suited into MaterialUI libs (or even at DuckDcukGo!), which would need to detect the browser and apply hack solution on buggy browsers. I've just opened an issue there about this problem.