Merge branch '694-narrow-cards' into 'master'

Fix #694: resizing issues on album cards

See merge request !591

changes/changelog.d/694.bugfix

+Fixed resizing issues for album cards on artist pages (#694)

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 {

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">