Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
susnux merged 2 commits into from
Jul 26, 2024
Merged

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

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7abaee8
fix(files): Ensure scrolled file list does not leak through file filters
susnux Jul 26, 2024
f3d9a71
chore(assets): Recompile assets
nextcloud-command Jul 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
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 <[email protected]>
  • Loading branch information
@susnux
susnux committed Jul 26, 2024
commit 7abaee813aaf1f40b8ef1ae7f4f3ffb0facb2b6f
12 changes: 11 additions & 1 deletion apps/files/src/components/FilesListVirtual.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
Expand Down Expand Up @@ -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">
Expand Down