From ada3df08dc5f43faf4c2bf62fff2380db872b882 Mon Sep 17 00:00:00 2001
From: Dessalines <tyhou13@gmx.com>
Date: Mon, 26 Nov 2018 22:25:52 -0700
Subject: [PATCH] More responsive

---
 server/ui/src/index.tsx | 64 ++++++++++++++++++++---------------------
 1 file changed, 31 insertions(+), 33 deletions(-)

diff --git a/server/ui/src/index.tsx b/server/ui/src/index.tsx
index 68ec49c..7d54aa5 100644
--- a/server/ui/src/index.tsx
+++ b/server/ui/src/index.tsx
@@ -77,41 +77,39 @@ class TorrentSearchComponent extends Component<any, State> {
   table() {
     return (
       <div>
-        <div class="table-responsive-md">
-          <table class="table table-hover table-sm table-striped">
-            <thead>
+        <table style="table-layout: fixed;" class="table table-fixed table-hover table-sm table-striped">
+          <thead>
+            <tr>
+              <th style="width: 50%">Name</th>
+              <th class="text-right">Size</th>
+              <th class="text-right">Seeds</th>
+              <th class="text-right d-none d-md-table-cell">Leeches</th>
+              <th class="text-right d-none d-md-table-cell">Created</th>
+              <th></th>
+            </tr>
+          </thead>
+          <tbody>
+            {this.state.results.torrents.map(torrent => (
               <tr>
-                <th style="width: 50%">Name</th>
-                <th class="text-right">Size</th>
-                <th class="text-right">Seeds</th>
-                <th class="text-right d-none d-md-table-cell">Leeches</th>
-                <th class="text-right d-none d-md-table-cell">Created</th>
-                <th></th>
+                <td style="word-wrap: break-word;">{torrent.name}</td>
+                <td class="text-right text-muted">{humanFileSize(torrent.size_bytes, true)}</td>
+                <td class="text-right text-success"><div><i class="fas fa-fw fa-arrow-up"></i>{torrent.seeders}</div></td>
+                <td class="text-right text-danger d-none d-md-table-cell"><i class="fas fa-fw fa-arrow-down"></i>{torrent.leechers}</td>
+                <td class="text-right text-muted d-none d-md-table-cell" title={`Scraped ${moment(torrent.scraped_date * 1000).fromNow()}`}>
+                  {moment(torrent.created_unix * 1000).fromNow()}
+                </td>
+                <td class="text-right">
+                  <a class="btn btn-sm" href={magnetLink(torrent.infohash)}>
+                    <i title="magnet link" class="fas fa-fw fa-magnet"></i>
+                  </a>
+                  <a class="btn btn-sm d-none d-md-inline" href={`https://gitlab.com/dessalines/torrents.csv/issues/new?issue[assignee_id]=&issue[milestone_id]=&issue[title]=Report%20Torrent%20infohash%20${torrent.infohash}`}>
+                    <i title="Report torrent" class="fas fa-fw fa-flag"></i>
+                  </a>
+                </td>
               </tr>
-            </thead>
-            <tbody>
-              {this.state.results.torrents.map(torrent => (
-                <tr>
-                  <td>{torrent.name}</td>
-                  <td class="text-right text-muted">{humanFileSize(torrent.size_bytes, true)}</td>
-                  <td class="text-right text-success"><div><i class="fas fa-fw fa-arrow-up"></i>{torrent.seeders}</div></td>
-                  <td class="text-right text-danger d-none d-md-table-cell"><i class="fas fa-fw fa-arrow-down"></i>{torrent.leechers}</td>
-                  <td class="text-right text-muted d-none d-md-table-cell" title={`Scraped ${moment(torrent.scraped_date * 1000).fromNow()}`}>
-                    {moment(torrent.created_unix * 1000).fromNow()}
-                  </td>
-                  <td class="text-right">
-                    <a class="btn btn-sm" href={magnetLink(torrent.infohash)}>
-                      <i title="magnet link" class="fas fa-fw fa-magnet"></i>
-                    </a>
-                    <a class="btn btn-sm d-none d-md-inline" href={`https://gitlab.com/dessalines/torrents.csv/issues/new?issue[assignee_id]=&issue[milestone_id]=&issue[title]=Report%20Torrent%20infohash%20${torrent.infohash}`}>
-                      <i title="Report torrent" class="fas fa-fw fa-flag"></i>
-                    </a>
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
+            ))}
+          </tbody>
+        </table>
         {this.paginator()}
       </div>
     );