From 53ff2027efd65ba7f831affc495c61ec21c6dc46 Mon Sep 17 00:00:00 2001
From: Eliot Berriot <contact@eliotberriot.com>
Date: Fri, 8 Feb 2019 16:15:51 +0100
Subject: [PATCH] Fix #694: resizing issues on album cards

---
 changes/changelog.d/694.bugfix            |  1 +
 front/src/components/audio/album/Card.vue | 28 +++++++++++++++--------
 front/src/components/library/Artist.vue   |  6 ++---
 3 files changed, 22 insertions(+), 13 deletions(-)
 create mode 100644 changes/changelog.d/694.bugfix

diff --git a/changes/changelog.d/694.bugfix b/changes/changelog.d/694.bugfix
new file mode 100644
index 000000000..7dd6e45a9
--- /dev/null
+++ b/changes/changelog.d/694.bugfix
@@ -0,0 +1 @@
+Fixed resizing issues for album cards on artist pages (#694)
diff --git a/front/src/components/audio/album/Card.vue b/front/src/components/audio/album/Card.vue
index a439a16b6..2f19d7fbb 100644
--- a/front/src/components/audio/album/Card.vue
+++ b/front/src/components/audio/album/Card.vue
@@ -22,7 +22,8 @@
                 <td class="play-cell">
                   <play-button class="basic icon" :track="track" :discrete="true"></play-button>
                 </td>
-                <td colspan="6">
+                <td class="content-cell" colspan="5">
+                  <track-favorite-icon :track="track"></track-favorite-icon>
                   <router-link class="track discrete link" :to="{name: 'library.tracks.detail', params: {id: track.id }}">
                     <template v-if="track.position">
                       {{ track.position }}.
@@ -30,9 +31,6 @@
                     {{ track.title }}
                   </router-link>
                 </td>
-                <td>
-                  <track-favorite-icon :track="track"></track-favorite-icon>
-                </td>
               </tr>
             </tbody>
           </table>
@@ -92,16 +90,28 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
-
-table.fixed td.play-cell {
-  overflow: auto;
+.content-cell {
+  .link,
+  .button {
+    padding: 0.5em 0;
+  }
+  .link {
+    margin-left: 0.5em;
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 }
 tr {
   .favorite-icon:not(.favorited) {
-    display: none;
+    visibility: hidden;
   }
   &:hover .favorite-icon {
-    display: inherit;
+    visibility: visible;
+  }
+  .favorite-icon {
+    float: right;
   }
 }
 .expand {
diff --git a/front/src/components/library/Artist.vue b/front/src/components/library/Artist.vue
index b7154935f..dd2be35ae 100644
--- a/front/src/components/library/Artist.vue
+++ b/front/src/components/library/Artist.vue
@@ -44,10 +44,8 @@
         <h2>
           <translate>Albums by this artist</translate>
         </h2>
-        <div class="ui stackable doubling three column grid">
-          <div class="column" :key="album.id" v-for="album in albums">
-            <album-card :mode="'rich'" class="fluid" :album="album"></album-card>
-          </div>
+        <div class="ui cards" >
+          <album-card :mode="'rich'" :album="album" :key="album.id" v-for="album in albums"></album-card>
         </div>
       </section>
       <section v-if="tracks.length > 0" class="ui vertical stripe segment">