From f59a276e0950e97c9b9ee11796bbc62e9dc23d39 Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Sun, 7 Jan 2024 15:29:14 +0100
Subject: [PATCH] [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.
---
 .../src/components/panels/Media/Providers/YouTube.vue  |  1 -
 .../components/panels/Media/Providers/YouTube/Feed.vue |  1 -
 .../panels/Media/Providers/YouTube/Playlist.vue        |  1 -
 .../panels/Media/Providers/YouTube/Playlists.vue       |  5 ++++-
 .../webapp/src/components/panels/Media/Results.vue     | 10 +++++++---
 5 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube.vue b/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube.vue
index ee341678c..c6491590d 100644
--- a/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube.vue
@@ -140,7 +140,6 @@ export default {
   .body {
     height: calc(100% - $media-nav-height - 2px);
     margin-top: 2px;
-    overflow: auto;
   }
 }
 </style>
diff --git a/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Feed.vue b/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Feed.vue
index 04d0cd7bb..eaadfda6c 100644
--- a/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Feed.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Feed.vue
@@ -68,6 +68,5 @@ export default {
 <style lang="scss" scoped>
 .media-youtube-feed {
   height: 100%;
-  overflow: auto;
 }
 </style>
diff --git a/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Playlist.vue b/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Playlist.vue
index d8f13f490..c09d0089a 100644
--- a/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Playlist.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Playlist.vue
@@ -75,6 +75,5 @@ export default {
 <style lang="scss" scoped>
 .media-youtube-playlist {
   height: 100%;
-  overflow: auto;
 }
 </style>
diff --git a/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Playlists.vue b/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Playlists.vue
index 2d383e709..823e11145 100644
--- a/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Playlists.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Playlists.vue
@@ -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;
diff --git a/platypush/backend/http/webapp/src/components/panels/Media/Results.vue b/platypush/backend/http/webapp/src/components/panels/Media/Results.vue
index c45530b35..84aed6f72 100644
--- a/platypush/backend/http/webapp/src/components/panels/Media/Results.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Media/Results.vue
@@ -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;
-  overflow: auto;
+
+  .grid {
+    height: 100%;
+    overflow: auto;
+  }
 
   .info-container {
     width: 100%;