From e8652412589ad44f7c067beb8bc9adc3a02e04f8 Mon Sep 17 00:00:00 2001
From: mikiher <mikiher@gmail.com>
Date: Wed, 15 Jan 2025 10:39:59 +0200
Subject: [PATCH] Dynamically calculate episode row height on init

---
 .../tables/podcast/LazyEpisodesTable.vue         | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/client/components/tables/podcast/LazyEpisodesTable.vue b/client/components/tables/podcast/LazyEpisodesTable.vue
index 5e7b15ea..8821ccef 100644
--- a/client/components/tables/podcast/LazyEpisodesTable.vue
+++ b/client/components/tables/podcast/LazyEpisodesTable.vue
@@ -30,7 +30,7 @@
         <ui-text-input v-model="search" @input="inputUpdate" type="search" :placeholder="$strings.PlaceholderSearchEpisode" class="flex-grow mr-2 text-sm md:text-base" />
       </form>
     </div>
-    <div class="relative min-h-[176px]">
+    <div class="relative min-h-44">
       <template v-for="episode in totalEpisodes">
         <div :key="episode" :id="`episode-${episode - 1}`" class="w-full h-44 px-2 py-3 overflow-hidden relative border-b border-white/10">
           <!-- episode is mounted here -->
@@ -39,7 +39,7 @@
       <div v-if="isSearching" class="w-full h-full absolute inset-0 flex justify-center py-12" :class="{ 'bg-black/50': totalEpisodes }">
         <ui-loading-indicator />
       </div>
-      <div v-else-if="!totalEpisodes" class="h-44 flex items-center justify-center">
+      <div v-else-if="!totalEpisodes" id="no-episodes" class="h-44 flex items-center justify-center">
         <p class="text-lg">{{ $strings.MessageNoEpisodes }}</p>
       </div>
     </div>
@@ -80,7 +80,7 @@ export default {
       episodeComponentRefs: {},
       windowHeight: 0,
       episodesTableOffsetTop: 0,
-      episodeRowHeight: 176,
+      episodeRowHeight: 44 * 4, // h-44,
       currScrollTop: 0
     }
   },
@@ -538,9 +538,10 @@ export default {
       this.episodesTableOffsetTop = (lazyEpisodesTableEl?.offsetTop || 0) + 64
 
       this.windowHeight = window.innerHeight
-      this.episodesPerPage = Math.ceil(this.windowHeight / this.episodeRowHeight)
 
       this.$nextTick(() => {
+        this.recalcEpisodeRowHeight()
+        this.episodesPerPage = Math.ceil(this.windowHeight / this.episodeRowHeight)
         // Maybe update currScrollTop if items were removed
         const itemPageWrapper = document.getElementById('item-page-wrapper')
         const { scrollHeight, clientHeight } = itemPageWrapper
@@ -548,6 +549,13 @@ export default {
         this.currScrollTop = Math.min(this.currScrollTop, maxScrollTop)
         this.handleScroll()
       })
+    },
+    recalcEpisodeRowHeight() {
+      const episodeRowEl = document.getElementById('episode-0') || document.getElementById('no-episodes')
+      if (episodeRowEl) {
+        const height = getComputedStyle(episodeRowEl).height
+        this.episodeRowHeight = parseInt(height) || this.episodeRowHeight
+      }
     }
   },
   mounted() {