fix(files): Remove huge margin on bottom

Instead make it relative to screen size.

Signed-off-by: Ferdinand Thiessen <[email protected]>

apps/files/src/components/FilesListTableFooter.vue

@@ -64,6 +64,7 @@ import Vue from 'vue'
 
 import { useFilesStore } from '../store/files.ts'
 import { usePathsStore } from '../store/paths.ts'
+import { useRouteParameters } from '../composables/useRouteParameters.ts'
 
 export default Vue.extend({
 	name: 'FilesListTableFooter',
@@ -97,9 +98,11 @@ export default Vue.extend({
 	setup() {
 		const pathsStore = usePathsStore()
 		const filesStore = useFilesStore()
+		const { directory } = useRouteParameters()
 		return {
 			filesStore,
 			pathsStore,
+			directory,
 		}
 	},
 
@@ -118,7 +121,7 @@ export default Vue.extend({
 				return
 			}
 
-			if (this.dir === '/') {
+			if (this.directory === '/') {
 				return this.filesStore.getRoot(this.currentView.id)
 			}
 			const fileId = this.pathsStore.getPath(this.currentView.id, this.dir)
@@ -160,7 +163,7 @@ export default Vue.extend({
 <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

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