Responsive cards/tables thanks to unstackable

front/src/components/Sidebar.vue

@@ -53,7 +53,7 @@
       </div>
     </div>
     <div class="ui bottom attached tab" data-tab="queue">
-      <table class="ui compact inverted very basic fixed single line table">
+      <table class="ui compact inverted very basic fixed single line unstackable table">
         <draggable v-model="queue.tracks" element="tbody" @update="reorder">
           <tr @click="$store.dispatch('queue/currentIndex', index)" v-for="(track, index) in queue.tracks" :key="index" :class="[{'active': index === queue.currentIndex}]">
               <td class="right aligned">{{ index + 1}}</td>

front/src/components/audio/Player.vue

@@ -10,7 +10,7 @@
       :track="currentTrack">
     </audio-track>
 
-    <div v-if="currentTrack" class="track-area ui items">
+    <div v-if="currentTrack" class="track-area ui unstackable items">
       <div class="ui inverted item">
         <div class="ui tiny image">
           <img v-if="currentTrack.album.cover" :src="Track.getCover(currentTrack)">

front/src/components/audio/album/Card.vue

@@ -14,7 +14,7 @@
           </router-link>
         </div>
         <div class="description" v-if="mode === 'rich'">
-          <table class="ui very basic fixed single line compact table">
+          <table class="ui very basic fixed single line compact unstackable table">
             <tbody>
               <tr v-for="track in tracks">
                 <td>

front/src/components/audio/artist/Card.vue

@@ -7,7 +7,7 @@
           </router-link>
         </div>
         <div class="description">
-          <table class="ui compact very basic fixed single line table">
+          <table class="ui compact very basic fixed single line unstackable table">
             <tbody>
               <tr v-for="album in albums">
                 <td>

front/src/components/audio/track/Table.vue

@@ -1,5 +1,5 @@
 <template>
-  <table class="ui compact very basic fixed single line table">
+  <table class="ui compact very basic fixed single line unstackable table">
     <thead>
       <tr>
         <th></th>

front/src/components/library/import/BatchDetail.vue

@@ -17,7 +17,7 @@
         <div v-if="batch.status === 'pending'" class="label">Importing {{ batch.jobs.length }} tracks...</div>
         <div v-if="batch.status === 'finished'" class="label">Imported {{ batch.jobs.length }} tracks!</div>
       </div>
-      <table class="ui table">
+      <table class="ui unstackable table">
         <thead>
           <tr>
             <th>Job ID</th>

front/src/components/library/import/BatchList.vue

@@ -12,7 +12,7 @@
         :disabled="!nextLink">Next <i class="right arrow icon"></i></button>
       <div class="ui hidden clearing divider"></div>
       <div class="ui hidden clearing divider"></div>
-      <table v-if="results.length > 0" class="ui table">
+      <table v-if="results.length > 0" class="ui unstackable table">
         <thead>
           <tr>
             <th>ID</th>