Dynamic viewport height

[heijligen]

Initial Checklist

• I understand this is a bug report and questions should be posted in the Community Discussions
• I searched issues and couldn’t find anything (or linked relevant results below)

Bug Description

On mobile devices the page is not fully accessible when the dynamic toolbar is visible. Especially the pagination picker can't be reached. This is only possible when hiding the dynamic toolbar which isn't so easy in the large scrollable area.

• OpenCloud Web UI: 3.0.0
• Browser: Vanadium (Chrome) 137.0.xxxx
• System: Pixel 6a / Android 15

PS: Thanks for developing OpenCloud as open source software!

Reproduction Steps

• open OpenCloud on a mobile Phone
• navigate to a folder with more entries than the pagination limit
• scroll down.

Expected Outcome

The page should not be "cut" at the top or bottom and all UI elements should be reachable

Actual Outcome

The page is "cut" at the top or bottom if the dynamic toolbar is visible.

[JammingBen]

I can't reproduce it, could you check if this may have been fixed in newer versions? Does it happen in other mobile browsers as well?

[heijligen]

I can reproduce it with google chrome for android on the demo.opencloud.eu instance with oc 3.2.1 and oc-web 3.2.0. Getting this state by accident is rarer now, but on purpose it is still possible. I cant reproduce it in firefox on android.
With these steps I can reproduce it currently quite reliable

• Upload more files than the pagination size
• repeat until the bug happen
  • reload the page and scroll down.
    I think the chrome browser has an issue there.

The issue where bottom of the page is not shown when the browser bar is shown is also there on firefox on android

I''later play around with the 100vh css values. And what append when setting those to 100dvh

[heijligen]

I've played a bit around with the properties. With this patch applied the address bar on Chrome and Firefox on Android is fixed and always visible. The OpenCloud Top-Bar can't be moved under the Browser navigation bar now. And when scrolling down the end is not cut off.

From d81a057e7da7230462e6699ea8d82193f1b27e3d Mon Sep 17 00:00:00 2001
From: Thomas Heijligen <src@posteo.de>
Date: Tue, 5 Aug 2025 16:15:07 +0200
Subject: [PATCH] [FOR TESTING ONLY] Use dynamic view port height

---
 packages/web-runtime/src/App.vue                         | 4 ++--
 packages/web-runtime/src/layouts/Application.vue         | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/web-runtime/src/App.vue b/packages/web-runtime/src/App.vue
index d3d782056..11807b3d9 100644
--- a/packages/web-runtime/src/App.vue
+++ b/packages/web-runtime/src/App.vue
@@ -141,8 +141,8 @@ body {
 
 #web {
   background-color: var(--oc-role-chrome);
-  height: 100vh;
-  max-height: 100vh;
+  height: 100dvh;
+  max-height: 100dvh;
   overflow-y: hidden;
 
   .mark-highlight {
diff --git a/packages/web-runtime/src/layouts/Application.vue b/packages/web-runtime/src/layouts/Application.vue
index 4818d9f75..d7d13a480 100644
--- a/packages/web-runtime/src/layouts/Application.vue
+++ b/packages/web-runtime/src/layouts/Application.vue
@@ -199,7 +199,7 @@ onBeforeUnmount(() => {
   display: flex;
   flex-flow: column;
   flex-wrap: nowrap;
-  height: 100vh;
+  height: 100dvh;
 
   #global-progress-bar {
     z-index: 10;
-- 
2.50.0

[JammingBen]

I tried it and could not see any negative impact of using dvh. And all modern browsers seem to support it. #1058 implements your patch, thank you!

[heijligen]

Please be aware that there are more occurrence of vh. I'm not familiar with web development or this code base. The patch was just me poking around without knowing the structure of the vue components and how they work together.

Thanks for working on it.