fix(files): Ensure scrolled file list does not leak through file filters

1. when scrolling the file list should not be visible behind the filters
2. on mobile we need to remove the padding of the filters to ensure they are accessible

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

diff --git a/apps/files/src/components/FilesListVirtual.vue b/apps/files/src/components/FilesListVirtual.vue
index 17de4b15b68e3b8e6bab6e889f300020ce5bd3b8..1b9475333ab70cb4159a0e53515f0af3d5be9141 100644 (file)
--- a/apps/files/src/components/FilesListVirtual.vue
+++ b/apps/files/src/components/FilesListVirtual.vue
@@ -374,8 +374,10 @@ export default defineComponent({
                        // Pinned on top when scrolling above table header
                        position: sticky;
                        top: 0;
-                       // fix size and background
+                       // ensure there is a background to hide the file list on scroll
                        background-color: var(--color-main-background);
+                       z-index: 10;
+                       // fixed the size
                        padding-inline: var(--row-height) var(--default-grid-baseline, 4px);
                        height: var(--fixed-top-position);
                        width: 100%;
@@ -698,6 +700,14 @@ export default defineComponent({
                }
        }
 }
+
+@media screen and (max-width: 512px) {
+       .files-list :deep(.files-list__filters) {
+               // Reduce padding on mobile
+               padding-inline: var(--default-grid-baseline, 4px);
+       }
+}
+
 </style>
 
 <style lang="scss">