Fix: List view overflowing titles #149

client/components/app/BookListRow.vue

@@ -8,11 +8,13 @@
       </div>
     </td>
     <td class="body-cell min-w-6 max-w-6">
-      <cards-book-cover :width="24" :audiobook="book" />
+      <cards-hover-book-cover :audiobook="book" />
     </td>
     <td class="body-cell min-w-64 max-w-64 px-2">
-      <nuxt-link :to="`/audiobook/${book.id}`" class="truncate hover:underline">
+      <nuxt-link :to="`/audiobook/${book.id}`" class="hover:underline">
-        {{ book.book.title }}<span v-if="book.book.subtitle">: {{ book.book.subtitle }}</span>
+        <p class="truncate">
+          {{ book.book.title }}<span v-if="book.book.subtitle">: {{ book.book.subtitle }}</span>
+        </p>
       </nuxt-link>
     </td>
     <td class="body-cell min-w-48 max-w-48 px-2">

client/components/cards/HoverBookCover.vue

@@ -0,0 +1,41 @@
+<template>
+  <div ref="container" @mouseover="mouseover" @mouseleave="mouseleave" class="relative">
+    <cards-book-cover :width="24" :audiobook="audiobook" />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    audiobook: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      isHovering: false
+    }
+  },
+  computed: {
+    placeholderUrl() {
+      return '/book_placeholder.jpg'
+    },
+    fullCoverUrl() {
+      return this.$store.getters['audiobooks/getBookCoverSrc'](this.audiobook, this.placeholderUrl)
+    },
+    hasCover() {
+      return !!this.audiobook.book.cover
+    }
+  },
+  methods: {
+    mouseover() {
+      this.isHovering = true
+    },
+    mouseleave() {
+      this.isHovering = false
+    }
+  },
+  mounted() {}
+}
+</script>