[Bug] Use dynamic viewport units on home screen

[detarkende]

Describe the bug

The Home screen scrollable area's bottom part is covered by the browser toolbar (see video).

To Reproduce

1. Open the app on a mobile device
2. Have enough apps for the scrollable area to overflow.
3. Scroll to the bottom.
4. Observe that the bottom browser toolbar hides a portion of the viewport.

Expected behavior

The user should be able to see the whole scrollable area without anything covering it.

Screenshots

https://github.com/IceWhaleTech/CasaOS/assets/64217783/bca5a02e-cc90-40dc-8129-68cac0e8eafa

Mobile (please complete the following information):

 - OS:  iOS
 - Browser: safari
 - Version 17.4

System Time

Run timedatectl and share the output

(timedatectl output here)

Logs

Logs are not relevant. This is a UI bug.

Additional context

I believe the root cause is in this file: https://github.com/IceWhaleTech/CasaOS-UI/blob/5871c702ebbb8a58d85e4f10785f81f7f3eed89e/main/src/views/Home.vue#L365

.contents {
    height: calc(100vh - 4rem) !important;
}

Now I'm not sure what the 4rem is for (maybe to account for the navbar?), but the 100vh doesn't account for the browser toolbar. I believe this would fix it:

.contents {
    height: calc(100vh - 4rem) !important;
    height: calc(100dvh - 4rem) !important;
}

For additional context on dynamic viewport units, check out this post.

[dbarwikowski]

I have the same issue on android

This is simple CSS fix. Can you create PR and link it here? Thanks! :-)