fix(files): Remove huge margin on bottom

Instead make it relative to screen size.

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

diff --git a/apps/files/src/components/FilesListTableFooter.vue b/apps/files/src/components/FilesListTableFooter.vue
index debace7a681b0abb12acba8abf1cf68c0e617039..bf545aacf4fbe095518c5835a8371c8dbac86b55 100644 (file)
--- a/apps/files/src/components/FilesListTableFooter.vue
+++ b/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;

diff --git a/apps/files/src/components/FilesListVirtual.vue b/apps/files/src/components/FilesListVirtual.vue
index cb38d744738d3a89f4e20ef6a70b7ec7b4eaa19e..75f579249843570da2bb3337ebf0f94145329da8 100644 (file)
--- a/apps/files/src/components/FilesListVirtual.vue
+++ b/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;