Make table scrollables (and improve their resizing)

front/src/components/ShortcutsModal.vue

@@ -5,7 +5,7 @@
     </header>
     <section class="scrolling content">
       <table
-        class="ui compact collapsing basic fixed single line table"
+        class="ui compact collapsing basic table"
         v-for="section in sections"
         :key="section.title">
       <caption>{{ section.title }}</caption>

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

@@ -40,7 +40,7 @@
     <td colspan="4" v-else>
       <translate :translate-context="'*/*/*'">N/A</translate>
     </td>
-    <td colspan="2">
+    <td colspan="2" class="align right">
       <track-favorite-icon class="favorite-icon" :track="track"></track-favorite-icon>
       <track-playlist-icon
         v-if="$store.state.auth.authenticated"

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

@@ -1,5 +1,6 @@
 <template>
-  <table class="ui compact very basic fixed single line unstackable table">
+  <div class="table-wrapper">
+    <table class="ui compact very basic unstackable table">
       <thead>
         <tr>
           <th></th>
@@ -21,6 +22,7 @@
           v-for="(track, index) in tracks"></track-row>
       </tbody>
     </table>
+  </div>
 </template>
 
 <script>

front/src/components/auth/Settings.vue

@@ -128,7 +128,7 @@
         <h3 class="ui header">
           <translate>Hidden artists</translate>
         </h3>
-        <table class="ui compact very basic fixed single line unstackable table">
+        <table class="ui compact very basic unstackable table">
           <thead>
             <tr>
               <th><translate :translate-context="'Content/*/Table.Label'">Name</translate></th>

front/src/components/common/ActionTable.vue

@@ -1,5 +1,6 @@
 <template>
-  <table class="ui compact very basic single line unstackable table">
+  <div class="table-wrapper">
+    <table class="ui compact very basic unstackable table">
       <thead>
         <tr>
           <th colspan="1000">
@@ -137,6 +138,7 @@
         </tr>
       </tbody>
     </table>
+  </div>
 </template>
 <script>
 import axios from 'axios'

front/src/components/library/FileUpload.vue

@@ -79,7 +79,9 @@
           <i><translate :translate-context="'Content/Library/Paragraph'" :translate-params="{extensions: supportedExtensions.join(', ')}">Supported extensions: %{ extensions }</translate></i>
         </file-upload-widget>
       </div>
-      <table v-if="files.length > 0" class="ui single line table">
+      <div v-if="files.length > 0" class="table-wrapper">
+        <div class="ui hidden divider"></div>
+        <table class="ui unstackable table">
           <thead>
             <tr>
               <th><translate :translate-context="'Content/Library/Table.Label'">Filename</translate></th>
@@ -112,6 +114,7 @@
             </tr>
           </tbody>
         </table>
+      </div>
 
     </div>
     <div :class="['ui', 'bottom', 'attached', 'segment', {hidden: currentTab != 'processing'}]">

front/src/components/playlists/Editor.vue

@@ -48,7 +48,8 @@
       <div class="ui hidden divider"></div>
       <template v-if="plts.length > 0">
         <p><translate :translate-context="'Content/Playlist/Paragraph/Call to action'">Drag and drop rows to reorder tracks in the playlist</translate></p>
-        <table class="ui compact very basic fixed single line unstackable table">
+        <div class="table-wrapper">
+          <table class="ui compact very basic unstackable table">
             <draggable v-model="plts" element="tbody" @update="reorder">
               <tr v-for="(plt, index) in plts" :key="plt.id">
                 <td class="left aligned">{{ plt.index + 1}}</td>
@@ -66,6 +67,8 @@
               </tr>
             </draggable>
           </table>
+
+        </div>
       </template>
     </div>
   </div>

front/src/style/_main.scss

@@ -285,3 +285,19 @@ span.diff.added {
 span.diff.removed {
   background-color: rgba(255, 0, 0, 0.25);
 }
+
+.table-wrapper {
+  display: block;
+  overflow-x: auto;
+}
+
+td.align.right {
+  text-align: right;
+}
+
+.ui.pagination.menu {
+  margin-top: 1em;
+  + span {
+    margin-left: 1em;
+  }
+}