[web] Fix vertical alignment of items presented in lists

Items presented in lists are not vertically centered.

web-src/src/components/ListAlbums.vue

@@ -7,7 +7,11 @@
         v-text="album.groupKey"
       />
     </div>
-    <div v-else-if="album.isItem" class="media" @click="open_album(album.item)">
+    <div
+      v-else-if="album.isItem"
+      class="media is-align-items-center"
+      @click="open_album(album.item)"
+    >
       <div v-if="is_visible_artwork" class="media-left">
         <cover-artwork
           :artwork_url="album.item.artwork_url"
@@ -18,7 +22,7 @@
         />
       </div>
       <div class="media-content is-clickable is-clipped">
-        <div style="margin-top: 0.7rem">
+        <div>
           <h1 class="title is-6" v-text="album.item.name" />
           <h2 class="subtitle is-7 has-text-grey">
             <b v-text="album.item.artist" />
@@ -30,7 +34,7 @@
           />
         </div>
       </div>
-      <div class="media-right" style="padding-top: 0.7rem">
+      <div class="media-right">
         <a @click.prevent.stop="open_dialog(album.item)">
           <mdicon class="icon has-text-dark" name="dots-vertical" size="16" />
         </a>

web-src/src/components/ListArtists.vue

@@ -11,7 +11,7 @@
     </div>
     <div
       v-else-if="artist.isItem"
-      class="media"
+      class="media is-align-items-center"
       @click="open_artist(artist.item)"
     >
       <div class="media-content is-clickable is-clipped">

web-src/src/components/ListComposers.vue

@@ -11,7 +11,7 @@
     </div>
     <div
       v-else-if="composer.isItem"
-      class="media"
+      class="media is-align-items-center"
       @click="open_composer(composer.item)"
     >
       <div class="media-content is-clickable is-clipped">

web-src/src/components/ListDirectories.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="$route.query.directory"
-    class="media"
+    class="media is-align-items-center"
     @click="open_parent_directory()"
   >
     <figure class="media-left is-clickable">
@@ -15,7 +15,7 @@
     </div>
   </div>
   <template v-for="directory in directories" :key="directory.path">
-    <div class="media" @click="open_directory(directory)">
+    <div class="media is-align-items-center" @click="open_directory(directory)">
       <figure class="media-left is-clickable">
         <mdicon class="icon" name="folder" size="16" />
       </figure>

web-src/src/components/ListGenres.vue

@@ -9,7 +9,11 @@
         />
       </div>
     </div>
-    <div v-else-if="genre.isItem" class="media" @click="open_genre(genre.item)">
+    <div
+      v-else-if="genre.isItem"
+      class="media is-align-items-center"
+      @click="open_genre(genre.item)"
+    >
       <div class="media-content is-clickable is-clipped">
         <h1 class="title is-6" v-text="genre.item.name" />
       </div>

web-src/src/components/ListItemQueueItem.vue

@@ -1,5 +1,8 @@
 <template>
-  <div v-if="is_next || !show_only_next_items" class="media">
+  <div
+    v-if="is_next || !show_only_next_items"
+    class="media is-align-items-center"
+  >
     <div v-if="edit_mode" class="media-left">
       <mdicon
         class="icon has-text-grey fd-is-movable handle"

web-src/src/components/ListPlaylists.vue

@@ -2,7 +2,7 @@
   <div
     v-for="playlist in playlists"
     :key="playlist.itemId"
-    class="media"
+    class="media is-align-items-center"
     :playlist="playlist"
     @click="open_playlist(playlist.item)"
   >

web-src/src/components/ListTracks.vue

@@ -9,7 +9,7 @@
     </div>
     <div
       v-else-if="track.isItem"
-      class="media"
+      class="media is-align-items-center"
       :class="{ 'with-progress': show_progress }"
       @click="play_track(index, track.item)"
     >

web-src/src/components/SpotifyListItemAlbum.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="media">
+  <div class="media is-align-items-center">
     <div v-if="$slots['artwork']" class="media-left is-clickable">
       <slot name="artwork" />
     </div>

web-src/src/components/SpotifyListItemArtist.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="media">
+  <div class="media is-align-items-center">
     <div class="media-content is-clickable is-clipped" @click="open_artist">
       <h1 class="title is-6" v-text="artist.name" />
     </div>

web-src/src/components/SpotifyListItemPlaylist.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="media">
+  <div class="media is-align-items-center">
     <div class="media-content is-clickable is-clipped" @click="open_playlist">
       <h1 class="title is-6" v-text="playlist.name" />
       <h2 class="subtitle is-7" v-text="playlist.owner.display_name" />

web-src/src/components/SpotifyListItemTrack.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="media">
+  <div class="media is-align-items-center">
     <div
       class="media-content is-clipped"
       :class="{