Merge pull request #13578 from Nico3012/bugfix/change-to-dynamic-viewport-units

LukasHirt · web-flow · commit b66c90059b18 · 2026-02-18T11:48:52.000+01:00
Bugfix/change to dynamic viewport units
diff --git a/changelog/unreleased/bugfix-use-dynamic-viewport-units.md b/changelog/unreleased/bugfix-use-dynamic-viewport-units.md
@@ -0,0 +1,7 @@
+Bugfix: Use dynamic viewport units (dvh/dvw) instead of viewport units (vh/vw)
+
+We have updated the CSS to use dynamic viewport units (dvh/dvw) instead of
+viewport units (vh/vw) for better responsiveness on mobile devices, especially
+when the virtual keyboard appears.
+
+https://github.com/owncloud/web/pull/13578
diff --git a/packages/design-system/src/components/OcModal/OcModal.vue b/packages/design-system/src/components/OcModal/OcModal.vue
@@ -326,7 +326,7 @@ const iconName = computed(() => {
   border: 1px solid var(--oc-color-input-border);
   border-radius: 15px;
   box-shadow: 5px 0 25px rgba(0, 0, 0, 0.3);
-  max-height: 90vh;
+  max-height: 90dvh;
   max-width: 500px;
   overflow: auto;
   width: 100%;
diff --git a/packages/design-system/src/styles/theme/oc-height.scss b/packages/design-system/src/styles/theme/oc-height.scss
@@ -30,7 +30,7 @@ $height-large-height: 450px !default;
  * Useful to create image teasers
  */
 
-.oc-height-viewport { min-height: 100vh; }
+.oc-height-viewport { min-height: 100dvh; }
 
 /*
  * Pixel
diff --git a/packages/web-app-files/src/components/FilesList/NotFoundMessage.vue b/packages/web-app-files/src/components/FilesList/NotFoundMessage.vue
@@ -75,6 +75,6 @@ const spacesRoute = createLocationSpaces('files-spaces-projects')
 </script>
 <style>
 #files-list-not-found-message {
-  height: 75vh;
+  height: 75dvh;
 }
 </style>
diff --git a/packages/web-app-files/src/views/spaces/Projects.vue b/packages/web-app-files/src/views/spaces/Projects.vue
@@ -477,7 +477,7 @@ function openSidebarSharePanel(space: SpaceResource) {
 
 <style lang="scss">
 #files-spaces-empty {
-  height: 75vh;
+  height: 75dvh;
 }
 
 .table-preview {
diff --git a/packages/web-app-password-protected-folders/src/components/FolderViewModal.vue b/packages/web-app-password-protected-folders/src/components/FolderViewModal.vue
@@ -47,7 +47,7 @@ const onLoad = () => {
 
 <style lang="scss">
 .oc-modal.folder-view-modal {
-  max-width: 80vw;
+  max-width: 80dvw;
   border: none;
   overflow: hidden;
 
@@ -59,7 +59,7 @@ const onLoad = () => {
     padding: 0;
 
     &-message {
-      height: 60vh;
+      height: 60dvh;
       margin: 0;
     }
   }
diff --git a/packages/web-app-search/src/portals/SearchBar.vue b/packages/web-app-search/src/portals/SearchBar.vue
@@ -737,7 +737,7 @@ onBeforeUnmount(() => {
       right: 0;
       margin: 0 auto;
       top: 0;
-      max-width: 95vw !important;
+      max-width: 95dvw !important;
       z-index: 9;
 
       .oc-search-input-icon {
@@ -759,7 +759,7 @@ onBeforeUnmount(() => {
     width: 100%;
     max-width: 450px;
     overflow-y: auto;
-    max-height: calc(100vh - 60px);
+    max-height: calc(100dvh - 60px);
     text-decoration: none;
 
     // Prevent all elements inside dropdown from being focusable via tab
@@ -790,7 +790,7 @@ onBeforeUnmount(() => {
     }
 
     @media (max-width: 639px) {
-      max-width: 93vw !important;
+      max-width: 93dvw !important;
     }
 
     ul {
diff --git a/packages/web-app-text-editor/src/App.vue b/packages/web-app-text-editor/src/App.vue
@@ -37,7 +37,7 @@ defineEmits<Emits>()
   padding: 18px 25px;
 
   //Fixes in readonly mode vertical scrolling is not available
-  height: calc(100vh - 52px);
+  height: calc(100dvh - 52px);
   overflow: auto;
 }
 
diff --git a/packages/web-pkg/src/components/Modals/ExportAsPdfModal.vue b/packages/web-pkg/src/components/Modals/ExportAsPdfModal.vue
@@ -122,7 +122,7 @@ onBeforeUnmount(() => {
 
 <style lang="scss">
 .oc-modal.export-as-pdf-modal {
-  max-width: 80vw;
+  max-width: 80dvw;
   border: none;
   overflow: hidden;
 
@@ -134,7 +134,7 @@ onBeforeUnmount(() => {
     padding: 0;
 
     &-message {
-      height: 60vh;
+      height: 60dvh;
       margin: 0;
     }
   }
diff --git a/packages/web-pkg/src/components/Modals/FilePickerModal.vue b/packages/web-pkg/src/components/Modals/FilePickerModal.vue
@@ -112,7 +112,7 @@ onBeforeUnmount(() => {
 
 <style lang="scss">
 .oc-modal.open-with-app-modal {
-  max-width: 80vw;
+  max-width: 80dvw;
   border: none;
   overflow: hidden;
 
@@ -124,7 +124,7 @@ onBeforeUnmount(() => {
     padding: 0;
 
     &-message {
-      height: 60vh;
+      height: 60dvh;
       margin: 0;
     }
   }
diff --git a/packages/web-pkg/src/components/Modals/SaveAsModal.vue b/packages/web-pkg/src/components/Modals/SaveAsModal.vue
@@ -174,7 +174,7 @@ onBeforeUnmount(() => {
 
 <style lang="scss">
 .oc-modal.save-as-modal {
-  max-width: 80vw;
+  max-width: 80dvw;
   border: none;
   overflow: hidden;
 
@@ -186,7 +186,7 @@ onBeforeUnmount(() => {
     padding: 0;
 
     &-message {
-      height: 60vh;
+      height: 60dvh;
       margin: 0;
     }
   }
diff --git a/packages/web-pkg/src/components/NoContentMessage.vue b/packages/web-pkg/src/components/NoContentMessage.vue
@@ -29,10 +29,10 @@ const props = withDefaults(defineProps<Props>(), {
 </script>
 <style>
 .no-content-message {
-  height: 75vh;
+  height: 75dvh;
 }
 
 .space-frontpage .no-content-message {
-  height: 55vh;
+  height: 55dvh;
 }
 </style>
diff --git a/packages/web-runtime/src/App.vue b/packages/web-runtime/src/App.vue
@@ -172,8 +172,8 @@ body {
 
 #web {
   background-color: var(--oc-color-swatch-brand-default);
-  height: calc(100vh - var(--web-runtime-maintenance-banner-height));
-  max-height: 100vh;
+  height: calc(100dvh - var(--web-runtime-maintenance-banner-height));
+  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
@@ -297,7 +297,7 @@ export default defineComponent({
   display: flex;
   flex-flow: column;
   flex-wrap: nowrap;
-  height: calc(100vh - var(--web-runtime-maintenance-banner-height));
+  height: calc(100dvh - var(--web-runtime-maintenance-banner-height));
 
   #global-progress-bar {
     z-index: 10;
diff --git a/packages/web-runtime/src/pages/login.vue b/packages/web-runtime/src/pages/login.vue
@@ -75,7 +75,7 @@ export default defineComponent({
 <style lang="scss" scoped>
 .login {
   align-content: center;
-  min-height: 100vh;
+  min-height: 100dvh;
   width: 100%;
 }
 

Original file line number	Diff line number	Diff line change
`@@ -75,6 +75,6 @@ const spacesRoute = createLocationSpaces('files-spaces-projects')`
`75`	`75`	`</script>`
`76`	`76`	`<style>`
`77`	`77`	`#files-list-not-found-message {`
`78`		`- height: 75vh;`
	`78`	`+ height: 75dvh;`
`79`	`79`	`}`
`80`	`80`	`</style>`
Original file line number	Diff line number	Diff line change
`@@ -477,7 +477,7 @@ function openSidebarSharePanel(space: SpaceResource) {`
`477`	`477`
`478`	`478`	`<style lang="scss">`
`479`	`479`	`#files-spaces-empty {`
`480`		`- height: 75vh;`
	`480`	`+ height: 75dvh;`
`481`	`481`	`}`
`482`	`482`
`483`	`483`	`.table-preview {`
Original file line number	Diff line number	Diff line change
`@@ -47,7 +47,7 @@ const onLoad = () => {`
`47`	`47`
`48`	`48`	`<style lang="scss">`
`49`	`49`	`.oc-modal.folder-view-modal {`
`50`		`- max-width: 80vw;`
	`50`	`+ max-width: 80dvw;`
`51`	`51`	`border: none;`
`52`	`52`	`overflow: hidden;`
`53`	`53`
`@@ -59,7 +59,7 @@ const onLoad = () => {`
`59`	`59`	`padding: 0;`
`60`	`60`
`61`	`61`	`&-message {`
`62`		`- height: 60vh;`
	`62`	`+ height: 60dvh;`
`63`	`63`	`margin: 0;`
`64`	`64`	`}`
`65`	`65`	`}`
Original file line number	Diff line number	Diff line change
`@@ -37,7 +37,7 @@ defineEmits<Emits>()`
`37`	`37`	`padding: 18px 25px;`
`38`	`38`
`39`	`39`	`//Fixes in readonly mode vertical scrolling is not available`
`40`		`- height: calc(100vh - 52px);`
	`40`	`+ height: calc(100dvh - 52px);`
`41`	`41`	`overflow: auto;`
`42`	`42`	`}`
`43`	`43`
Original file line number	Diff line number	Diff line change
`@@ -122,7 +122,7 @@ onBeforeUnmount(() => {`
`122`	`122`
`123`	`123`	`<style lang="scss">`
`124`	`124`	`.oc-modal.export-as-pdf-modal {`
`125`		`- max-width: 80vw;`
	`125`	`+ max-width: 80dvw;`
`126`	`126`	`border: none;`
`127`	`127`	`overflow: hidden;`
`128`	`128`
`@@ -134,7 +134,7 @@ onBeforeUnmount(() => {`
`134`	`134`	`padding: 0;`
`135`	`135`
`136`	`136`	`&-message {`
`137`		`- height: 60vh;`
	`137`	`+ height: 60dvh;`
`138`	`138`	`margin: 0;`
`139`	`139`	`}`
`140`	`140`	`}`
Original file line number	Diff line number	Diff line change
`@@ -112,7 +112,7 @@ onBeforeUnmount(() => {`
`112`	`112`
`113`	`113`	`<style lang="scss">`
`114`	`114`	`.oc-modal.open-with-app-modal {`
`115`		`- max-width: 80vw;`
	`115`	`+ max-width: 80dvw;`
`116`	`116`	`border: none;`
`117`	`117`	`overflow: hidden;`
`118`	`118`
`@@ -124,7 +124,7 @@ onBeforeUnmount(() => {`
`124`	`124`	`padding: 0;`
`125`	`125`
`126`	`126`	`&-message {`
`127`		`- height: 60vh;`
	`127`	`+ height: 60dvh;`
`128`	`128`	`margin: 0;`
`129`	`129`	`}`
`130`	`130`	`}`