fix mobile table layout

tubearchivist/home/templates/home/settings.html

@@ -28,7 +28,7 @@
         <table>
             <thead>
                 <tr>
-                    <th>Name</th>
+                    <th class="agg-channel-name">Name</th>
                     <th>Videos</th>
                     <th>Duration</th>
                     <th>Media Size</th>

tubearchivist/static/css/style.css

@@ -1249,6 +1249,7 @@ video:-webkit-full-screen {
     .playlist-list.grid,
     .info-box-2,
     .info-box-3,
+    .info-box-4,
     .overwrite-form {
         grid-template-columns: 1fr;
     }
@@ -1315,4 +1316,12 @@ video:-webkit-full-screen {
     .playlist-nav-item img {
         width: 100%;
     }
+    .agg-channel-name {
+        min-width: 50px;
+        width: 100px;
+        max-width: 200px;
+    }
+    .td, th, span, label {
+        text-align: unset;
+    }
 }

tubearchivist/static/stats.js

@@ -142,7 +142,7 @@ function biggestChannel() {
 function buildChannelRow(channelData) {
   let tableRow = document.createElement('tr');
   tableRow.innerHTML = `
-    <td><a href="/channel/${channelData.id}/">${channelData.name}</a></td>
+    <td class="agg-channel-name"><a href="/channel/${channelData.id}/">${channelData.name}</a></td>
     <td>${channelData.doc_count}</td>
     <td>${channelData.duration_str}</td>
     <td>${humanFileSize(channelData.media_size)}</td>