Fix overview scrolling on mobile

[almarklein]

Closes #425

The buttons now respond to a click instead of down, and the overview can be scrolled by dragging. Also allows to scroll the overview up a bit more, in case the bottom of the app is obscured by a home bar. Fixed that the app takes up the full space, without having a bottom margin on iPhone or the bottom part of the app hidden by the Android navigation bar.

This also fixes #194 again, undoing the change in #198 where 100vh was used instead of 100%. The trick was to removing the padding of the parent element. This post helped me find the solution.

[almarklein]

Hey @Tagirijus, this PR should fix both issues you mentioned. As for the the bottom being cut off, I suspect that the phone's navbar obfuscates the app, like this:

I allowed the scrolling to pull the overview a bit more upwards, so it should be possible to pull the last bar from under the navbar, so to speak.

Could you please try it out at https://staging.timetagger.app/app/demo ?

If its good on your end I will merge this PR and also update the actual app.

[Tagirijus]

Hey, thanks for the update. I just tested with your link: the "more button" with the number on it is not visible on the bottom, but I can at least scroll now. And compared to the desktop version it seems that at least the last task is visible on the bottom then. Not sure if my mobile is a very rare small one these days. Yet I tested with another mobile which has a bigger screen (higher). On that the last task is still a bit cut off. So something is not quite right for now, unfortunately. But at least the scrolling works, yay.

Sorry for not having better feedback for now.

[almarklein]

Thanks for trying it out! That's very valuable! Also an interesting problem 😃

BTW is this in a browser or have you "installed" the app (add website to homescreen)?

[Tagirijus]

It's only in the browser. For "installed" I had to log in, yet I do not have an account. I just tested in hope to be able to see if it might be different, hehe.

[Tagirijus]

Unfortunately still the same.

[Tagirijus]

Hold on, nevermind! Had to refresh! Seems to work!

[almarklein]

Ah, great! I read a hint somewhere, and traced it to the change in #194. Good to know that undoing that change fixes it for you. Unfortunately, now it looks like this on iPhone again:

I may need to conditionally apply the CSS ...

[Tagirijus]

Hm, I'd could be ignorant and say: pff, iPhone. d-: ... yet, what a bummer. Maybe a OS depended CSS could be a solution (in case it would even work technically)?

[Tagirijus]

Yep, still works! Does it fix it on iPhone as well now? Then congratz! (;

[almarklein]

Nope, haha

[Tagirijus]

This still works on my end. (=

[almarklein]

Yes! And it works for me too! 🥳

Thanks for testing along with me 🙏

[Tagirijus]

Nice! I am glad I could help. (=