[Media UI] Set overflow: auto on the innermost grid div only.

If a parent object of the `grid` DOM element has `overflow: auto` as
well, then it will intercept the `@scroll` events, so `Results` won't be
able to render an infinite scroll.
This commit is contained in:
Fabio Manganiello 2024-01-07 15:29:14 +01:00
parent 9f6ac4acd1
commit f59a276e09
Signed by: blacklight
GPG key ID: D90FBA7F76362774
5 changed files with 11 additions and 7 deletions

View file

@ -140,7 +140,6 @@ export default {
.body {
height: calc(100% - $media-nav-height - 2px);
margin-top: 2px;
overflow: auto;
}
}
</style>

View file

@ -68,6 +68,5 @@ export default {
<style lang="scss" scoped>
.media-youtube-feed {
height: 100%;
overflow: auto;
}
</style>

View file

@ -75,6 +75,5 @@ export default {
<style lang="scss" scoped>
.media-youtube-playlist {
height: 100%;
overflow: auto;
}
</style>

View file

@ -90,7 +90,10 @@ export default {
<style lang="scss" scoped>
.media-youtube-playlists {
height: 100%;
overflow: auto;
.playlist-body {
height: 100%;
}
:deep(.playlist.item) {
cursor: pointer;

View file

@ -1,7 +1,7 @@
<template>
<div class="media-results" @scroll="onScroll">
<div class="media-results">
<Loading v-if="loading" />
<div class="grid" ref="grid" v-if="results?.length">
<div class="grid" ref="grid" v-if="results?.length" @scroll="onScroll">
<Item v-for="(item, i) in visibleResults"
:key="i"
:item="item"
@ -114,7 +114,11 @@ export default {
width: 100%;
height: 100%;
background: $background-color;
.grid {
height: 100%;
overflow: auto;
}
.info-container {
width: 100%;