diff --git a/package-lock.json b/package-lock.json
index cf4902e04..0b9f090dd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2983,6 +2983,11 @@
       "integrity": "sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0=",
       "dev": true
     },
+    "debounce": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.0.tgz",
+      "integrity": "sha512-mYtLl1xfZLi1m4RtQYlZgJUNQjl4ZxVnHzIR8nLLgi4q1YT8o/WM+MK/f8yfcc9s5Ir5zRaPZyZU6xs1Syoocg=="
+    },
     "debug": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
@@ -6910,9 +6915,9 @@
       }
     },
     "nextcloud-vue": {
-      "version": "0.8.0",
-      "resolved": "https://registry.npmjs.org/nextcloud-vue/-/nextcloud-vue-0.8.0.tgz",
-      "integrity": "sha512-6qXcWTgtrbM4W1AjyHSWn0cHOFm/Q39A//OibrY7M332orQnDvCrDoGloUUOW6+vbXJarI+L7t7scL6mkRw4Qg==",
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/nextcloud-vue/-/nextcloud-vue-0.9.0.tgz",
+      "integrity": "sha512-5ryV0XCa/kS8ArHhP8+MZouprky7di5oSBRPoIsXxTQSy50RaoHqgSeXTZy3sYEN+XMc5yGoyYtKZGq2I5kMCA==",
       "requires": {
         "hammerjs": "^2.0.8",
         "md5": "^2.2.1",
@@ -6921,6 +6926,7 @@
         "vue": "^2.6.7",
         "vue-click-outside": "^1.0.7",
         "vue-multiselect": "^2.1.3",
+        "vue-visible": "^1.0.2",
         "vue2-datepicker": "^2.10.0"
       }
     },
@@ -10722,9 +10728,9 @@
       }
     },
     "vue-multiselect": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/vue-multiselect/-/vue-multiselect-2.1.3.tgz",
-      "integrity": "sha512-ANLvoLEZv5uzissmh2WSHTn8DGhqsKi6zVtctpf1wnGK6vmZBktQZzeuHGxH7KpIb+4A6BlXmq0RR08jtQ67tg=="
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/vue-multiselect/-/vue-multiselect-2.1.4.tgz",
+      "integrity": "sha512-ryd2Ybl56LE81IxlwbZUo4gAWnUSG45iUGX4KgVwsteitK2R+cOLwJaJescobpIDJnVlVorRUnX5u7my1vBu2w=="
     },
     "vue-resize": {
       "version": "0.4.5",
@@ -10757,6 +10763,11 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vue-visible": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/vue-visible/-/vue-visible-1.0.2.tgz",
+      "integrity": "sha512-yaX2its9XAJKGuQqf7LsiZHHSkxsIK8rmCOQOvEGEoF41blKRK8qr9my4qYoD6ikdLss4n8tKqYBecmaY0+WJg=="
+    },
     "vue2-datepicker": {
       "version": "2.10.0",
       "resolved": "https://registry.npmjs.org/vue2-datepicker/-/vue2-datepicker-2.10.0.tgz",
diff --git a/package.json b/package.json
index 62f8113d4..20fcd7fac 100644
--- a/package.json
+++ b/package.json
@@ -35,9 +35,10 @@
   },
   "dependencies": {
     "axios": "^0.18.0",
+    "debounce": "^1.2.0",
     "mime-types": "^2.1.22",
     "nextcloud-server": "^0.15.9",
-    "nextcloud-vue": "^0.8.0",
+    "nextcloud-vue": "^0.9.0",
     "vue": "^2.6.8",
     "vue-async-computed": "^3.6.1"
   },
diff --git a/src/components/Images.vue b/src/components/Images.vue
index 6ff376701..808ad8feb 100644
--- a/src/components/Images.vue
+++ b/src/components/Images.vue
@@ -34,6 +34,7 @@
 import mime from 'Mixins/Mime'
 import axios from 'axios'
 import Vue from 'vue'
+import debounce from 'debounce'
 import AsyncComputed from 'vue-async-computed'
 
 Vue.use(AsyncComputed)
@@ -51,7 +52,13 @@ export default {
 			return this.getBase64FromImage()
 		}
 	},
+	mounted() {
+		window.addEventListener('resize', debounce(() => {
+			this.updateImgSize()
+		}, 100))
+	},
 	methods: {
+		// Updates the dimensions of the modal
 		updateImgSize() {
 			const naturalHeight = this.$el.naturalHeight
 			const naturalWidth = this.$el.naturalWidth
@@ -64,6 +71,7 @@ export default {
 
 			this.doneLoading()
 		},
+
 		/**
 		 * Manually retrieve the path and return its base64
 		 *
diff --git a/src/components/Videos.vue b/src/components/Videos.vue
index f401d63b5..ab94eba3c 100644
--- a/src/components/Videos.vue
+++ b/src/components/Videos.vue
@@ -43,6 +43,7 @@
 </template>
 
 <script>
+import debounce from 'debounce'
 import mime from 'Mixins/Mime'
 
 export default {
@@ -67,18 +68,28 @@ export default {
 			}
 		}
 	},
+	mounted() {
+		window.addEventListener('resize', debounce(() => {
+			this.updateVideoSize()
+		}, 100))
+	},
 	methods: {
+		// Updates the dimensions of the modal
 		updateVideoSize() {
 			const videoHeight = this.$el.videoHeight
 			const videoWidth = this.$el.videoWidth
 			this.updateHeightWidth(videoHeight, videoWidth)
 		},
+
+		// Show/hide video controls
 		showControls() {
 			this.visibleControls = true
 		},
 		hideControls() {
 			this.visibleControls = false
 		},
+
+		// Toggle play/pause
 		playPause() {
 			if (this.$el.paused) {
 				this.$el.play()
diff --git a/src/mixins/Mime.js b/src/mixins/Mime.js
index 33a62a657..2df7acd7f 100644
--- a/src/mixins/Mime.js
+++ b/src/mixins/Mime.js
@@ -67,7 +67,7 @@ export default {
 			const modalContainer = this.$parent.$el.querySelector('#modal-wrapper')
 			if (modalContainer) {
 				// ! modal container have maxHeight:80% AND maxWidth: 900px
-				const parentHeight = Math.round(modalContainer.clientHeight * 0.8)
+				const parentHeight = Math.round(modalContainer.clientHeight * 0.8) - 50 // minus header
 				const parentWidth = modalContainer.clientWidth > 900
 					? 900
 					: modalContainer.clientWidth
diff --git a/src/views/Viewer.vue b/src/views/Viewer.vue
index 767c2e91d..1da245790 100644
--- a/src/views/Viewer.vue
+++ b/src/views/Viewer.vue
@@ -41,7 +41,7 @@
 			:key="previousFile.path"
 			:mime="previousFile.mime"
 			:path="previousFile.path"
-			class="hidden-visually"
+			class="hidden-visually file-view"
 			@error="previousFailed" />
 		<error
 			v-else
@@ -56,6 +56,7 @@
 			:mime="currentFile.mime"
 			:path="currentFile.path"
 			:active="true"
+			class="file-view"
 			@loaded="doneLoading"
 			@error="currentFailed" />
 		<error
@@ -70,7 +71,7 @@
 			:key="nextFile.path"
 			:mime="nextFile.mime"
 			:path="nextFile.path"
-			class="hidden-visually"
+			class="hidden-visually file-view"
 			@error="nextFailed" />
 		<error
 			v-else
@@ -439,4 +440,9 @@ export default {
 .icon-share-white-forced {
 	background-image: url('~Assets/share-white.svg');
 }
+
+.file-view {
+	transition: height 100ms ease,
+		width 100ms ease;
+}
 </style>