Merge pull request #47467 from nextcloud/fix/virtual-files-list

fix(files): Adjust margin at the file list bottom

Author: susnux

apps/files/src/components/FilesListTableFooter.vue

@@ -50,6 +50,7 @@ import { defineComponent } from 'vue'
 
 import { useFilesStore } from '../store/files.ts'
 import { usePathsStore } from '../store/paths.ts'
+import { useRouteParameters } from '../composables/useRouteParameters.ts'
 
 export default defineComponent({
 	name: 'FilesListTableFooter',
@@ -84,27 +85,24 @@ export default defineComponent({
 	setup() {
 		const pathsStore = usePathsStore()
 		const filesStore = useFilesStore()
+		const { directory } = useRouteParameters()
 		return {
 			filesStore,
 			pathsStore,
+			directory,
 		}
 	},
 
 	computed: {
-		dir() {
-			// Remove any trailing slash but leave root slash
-			return (this.$route?.query?.dir || '/').replace(/^(.+)\/$/, '$1')
-		},
-
 		currentFolder() {
 			if (!this.currentView?.id) {
 				return
 			}
 
-			if (this.dir === '/') {
+			if (this.directory === '/') {
 				return this.filesStore.getRoot(this.currentView.id)
 			}
-			const fileId = this.pathsStore.getPath(this.currentView.id, this.dir)!
+			const fileId = this.pathsStore.getPath(this.currentView.id, this.directory)!
 			return this.filesStore.getNode(fileId)
 		},
 
@@ -143,7 +141,7 @@ export default defineComponent({
 <style scoped lang="scss">
 // Scoped row
 tr {
-	margin-bottom: 300px;
+	margin-bottom: max(25vh, var(--body-container-margin));
 	border-top: 1px solid var(--color-border);
 	// Prevent hover effect on the whole row
 	background-color: transparent !important;

apps/files/src/components/FilesListVirtual.vue

@@ -427,11 +427,6 @@ export default defineComponent({
 			top: var(--fixed-top-position);
 		}
 
-		// Table footer
-		.files-list__tfoot {
-			min-height: 300px;
-		}
-
 		tr {
 			position: relative;
 			display: flex;